Create category card component

2024-12-21 19:45:59 +03:30
parent 25733a2735
commit e94104b115
1 changed files with 47 additions and 0 deletions
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+// types
+
+type Props = {
+    category: string;
+    count: number;
+    description: string;
+    picture: string;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <div class="relative rounded-150 overflow-hidden w-full h-[500px]">
+        <img
+            class="absolute object-cover size-full"
+            :src="picture"
+            alt=""
+        />
+        <div class="bg-linear-to-t from-black/80 to-transparent absolute z-10 size-full" />
+
+        <div class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full">
+
+            <div class="flex flex-col gap-2 text-white">
+                <div class="typo-s-h-md">
+                    تمام دسته ها
+                    <span class="typo-p-xs -translate-y-1 inline-block mr-1">
+                        24
+                    </span>
+                </div>
+                <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
+            </div>
+
+            <Icon
+                size="24"
+                name="ci:arrow-left"
+                class="**:stroke-white mb-1"
+            />
+
+        </div>
+    </div>
+</template>