feat: image card

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Dec 1, 2024 · 03233a4 · 03233a4
1 parent 71c523f
commit 03233a4
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 29 deletions.
diff --git a/components/content/Card.vue b/components/content/Card.vue
@@ -1,35 +1,45 @@
 <template>
+  <UseTemplate>
+    <UiCard
+      class="relative h-full overflow-hidden transition-all"
+      :class="[
+        to && 'hover:bg-muted',
+        inStack && 'mb-0 rounded-none border-none shadow-none',
+      ]"
+    >
+      <NuxtImg
+        v-if="img"
+        :src="img"
+        class="w-full"
+      />
+      <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
+        <SmartIcon v-if="icon" class="mb-2" :name="icon" :size="24" />
+        <UiCardTitle v-if="title || $slots.title">
+          <ContentSlot :use="$slots.title" unwrap="p" />
+          {{ title }}
+        </UiCardTitle>
+        <UiCardDescription v-if="description || $slots.description">
+          <ContentSlot :use="$slots.description" unwrap="p" />
+          {{ description }}
+        </UiCardDescription>
+      </UiCardHeader>
+      <UiCardContent v-if="content || $slots.content || $slots.default">
+        <ContentSlot :use="$slots.content" unwrap="p" />
+        <ContentSlot unwrap="p" />
+      </UiCardContent>
+      <UiCardFooter v-if="footer || $slots.footer">
+        <ContentSlot :use="$slots.footer" unwrap="p" />
+        {{ footer }}
+      </UiCardFooter>
+      <SmartIcon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
+    </UiCard>
+  </UseTemplate>
+
   <div class="group-has-[div]:mt-0 [&:not(:first-child)]:mt-5">
-    <NuxtLink :to :target>
-      <UiCard
-        class="relative h-full transition-all"
-        :class="[
-          to && 'hover:bg-muted',
-          inStack && 'mb-0 rounded-none border-none shadow-none',
-        ]"
-      >
-        <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
-          <SmartIcon v-if="icon" class="mb-2" :name="icon" :size="24" />
-          <UiCardTitle v-if="title || $slots.title">
-            <ContentSlot :use="$slots.title" unwrap="p" />
-            {{ title }}
-          </UiCardTitle>
-          <UiCardDescription v-if="description || $slots.description">
-            <ContentSlot :use="$slots.description" unwrap="p" />
-            {{ description }}
-          </UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent v-if="content || $slots.content || $slots.default">
-          <ContentSlot :use="$slots.content" unwrap="p" />
-          <ContentSlot unwrap="p" />
-        </UiCardContent>
-        <UiCardFooter v-if="footer || $slots.footer">
-          <ContentSlot :use="$slots.footer" unwrap="p" />
-          {{ footer }}
-        </UiCardFooter>
-        <SmartIcon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
-      </UiCard>
+    <NuxtLink v-if="to" :to :target>
+      <CardInner />
     </NuxtLink>
+    <CardInner v-else />
   </div>
 </template>
 
@@ -43,5 +53,7 @@ defineProps<{
   target?: Target;
   icon?: string;
   inStack?: boolean;
+  img?: string;
 }>();
+const [UseTemplate, CardInner] = createReusableTemplate();
 </script>
diff --git a/content/2.components/2.docs/card.md b/content/2.components/2.docs/card.md
@@ -51,6 +51,17 @@ badges:
     #content
     Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
     ::
+
+    ::card
+    ---
+    img: /og-nuxt.png
+    ---
+    #title
+    Image Card
+
+    #content
+    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+    ::
   ::
 
   ```mdc [Code]
@@ -86,6 +97,17 @@ badges:
   #title
   Card with link
 
+  #content
+  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  ::
+
+  ::card
+  ---
+  img: /og-nuxt.png
+  ---
+  #title
+  Image Card
+
   #content
   Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
   ::