refactor(components): refactor GradientCard for thin,link props

fmhy · Mar 31, 2024 · d0f5eb6 · d0f5eb6
1 parent 1c043d4
commit d0f5eb6
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/.changeset/ten-chefs-try.md b/.changeset/ten-chefs-try.md
@@ -0,0 +1,5 @@
+---
+"@fmhy/components": patch
+---
+
+refactor GradientCard to add `thin`,`link` props
diff --git a/docs/components.md b/docs/components.md
@@ -3,4 +3,12 @@
 ## `GradientCard`
 
 <GradientCard theme="cerise" title="title" description="Lorem ipsum dolor sit amet, qui minim labore
-adipisicing minim sint cillum sint consectetur cupidatat." tag="tag or link" />
+adipisicing minim sint cillum sint consectetur cupidatat." tag="tag" />
+
+Or, it's `thin` variant:
+
+<GradientCard theme="turquoise" title="title" description="Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." tag="tag" variant="thin"/>
+
+You can also pass a `link`:
+
+<GradientCard theme="meadow" title="title" description="Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." tag="tag"  link="https://ui.fmhy.net"/>
diff --git a/packages/components/src/components/GradientCard.vue b/packages/components/src/components/GradientCard.vue
@@ -1,49 +1,80 @@
 <script setup lang="ts">
-defineProps<{
-  title: string
-  tag: string
-  description: string
-  theme: string
-}>()
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'default' | 'thin'
+    link?: string
+    title: string
+    tag: string
+    description: string
+    theme: string
+  }>(),
+  {
+    variant: 'default'
+  }
+)
+
+const theme = computed(() => {
+  return {
+    title: `text-${props.theme}-100`,
+    bgleft: `bg-${props.theme}-800`,
+    bgright: `bg-${props.theme}-700`,
+    link: `text-${props.theme}-300`,
+    description: `text-${props.theme}-100`
+  }
+})
+
+const classes = computed(() => {
+  if (props.variant === 'thin') {
+    return {
+      container: 'h-40 text-sm',
+      bgleft: 'h-40 w-40 blur-2xl -left-20',
+      bgright: 'h-60 w-60 blur-2xl -top-24',
+      tag: 'text-3xl',
+      icon: 'top-12 left-4',
+      description: 'mt-2 text-sm'
+    }
+  } else {
+    return {
+      container: 'h-96',
+      bgleft: 'h-80 w-80 blur-3xl -left-32',
+      bgright: 'h-96 w-96 blur-3xl -top-56',
+      tag: 'text-6xl',
+      icon: 'top-36 left-6',
+      description: 'mt-4'
+    }
+  }
+})
 </script>
 
 <template>
-  <div
-    style="box-shadow: 0 10px 40px -12px rgba(16, 24, 40, 0.1)"
-    :class="`rounded-2xl h-96 border border-amber overflow-hidden flex flex-col relative text-color bg-zinc-900`"
-  >
+  <div style="box-shadow: 0 10px 40px -12px rgba(16, 24, 40, 0.1)" :class="classes.container"
+    class="rounded-2xl border border-amber overflow-hidden flex flex-col relative text-color bg-zinc-900">
     <div class="p-4 sticky top-0 z-10">
       <div class="flex items-center gap-1.5">
-        <div :class="`font-medium text-${theme}-100`">
-          {{ title }}
+        <div :class="theme.title" class="font-medium">
+          {{ props.title }}
         </div>
       </div>
     </div>
-    <div
-      :class="`bg-${theme}-800 absolute top-1/3 -left-32 -translate-y-1/2 rounded-full w-80 h-80 blur-3xl mix-blend`"
-    ></div>
-    <div
-      :class="`bg-${theme}-700 absolute -top-56 left-1/2 -translate-x-1/2 rounded-full w-96 h-96 blur-3xl mix-blend`"
-    ></div>
-    <div class="absolute top-36 left-6">
+    <div :class="`${theme.bgleft} ${classes.bgleft} absolute top-1/3 -translate-y-1/2 rounded-full mix-blend`"></div>
+    <div :class="`${theme.bgright} ${classes.bgright} absolute left-1/2 -translate-x-1/2 rounded-full mix-blend`"></div>
+    <div :class="`absolute ${classes.icon}`">
       <div class="flex items-start">
-        <div class="text-6xl font-normal tracking-tighter text-color-50">
-          {{ tag }}
+        <div :class="classes.tag" class="font-normal tracking-tighter text-color-50">
+          {{ props.tag }}
         </div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          :class="`text-${theme}-300 w-8 h-8 ml-3`"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
+        <a v-if="props.link" :href="props.link" target="_blank">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="theme.link"
+            class="w-8 h-8 ml-3">
+            <path fill-rule="evenodd"
+              d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
+              clip-rule="evenodd"></path>
+          </svg>
+        </a>
       </div>
-      <div :class="`mt-4 text-color-muted text-${theme}-100`">
+      <div :class="`text-color-muted ${theme.description} ${classes.description}`">
         {{ description }}
       </div>
     </div>