Create products grid component

2025-03-09 01:02:35 +03:30
parent 59da59d816
commit ea0aac9328
1 changed files with 42 additions and 0 deletions
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    title: string,
+    products: ProductListItem[]
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] container">
+        <div class="w-full flex justify-between items-center">
+            <span class="text-black typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">
+                {{ title }}
+            </span>
+            <NuxtLink to="/products">
+                <Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2" end-icon="ci:arrow-left">
+                    نمایش همه
+                </Button>
+            </NuxtLink>
+        </div>
+        <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8">
+            <ProductCard
+                v-for="product in products"
+                :key="product.id"
+                :id="product.id"
+                :title="product.name"
+                :picture="product.variants[0].images[0].image"
+                :colors="product.colors"
+                :price="product.variants[0].price"
+                :rate="product.rating"
+                :dark-layer="true"
+            />
+        </div>
+    </section>
+</template>