From 2438eceee69e8bf9d06edc6ae7b69d5b0868b199 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Mar 2025 16:22:13 +0330
Subject: [PATCH] added new with header prop

---
 frontend/components/global/ProductsGrid.vue | 37 +++++++++++++--------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/components/global/ProductsGrid.vue b/frontend/components/global/ProductsGrid.vue
index 0b57388..a0565df 100644
--- a/frontend/components/global/ProductsGrid.vue
+++ b/frontend/components/global/ProductsGrid.vue
@@ -1,31 +1,42 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
-    title: string,
-    products: ProductListItem[]
-}
+    title?: string;
+    products: ProductListItem[];
+    withHeader?: boolean;
+};
 
 // props
 
-defineProps<Props>();
-
+withDefaults(defineProps<Props>(), {
+    withHeader: true,
+});
 </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">
+    <section
+        class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] container"
+    >
+        <div v-if="withHeader" 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
+                    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">
+        <ul
+            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"
@@ -37,6 +48,6 @@ defineProps<Props>();
                 :rate="product.rating"
                 :dark-layer="true"
             />
-        </div>
+        </ul>
     </section>
-</template>
\ No newline at end of file
+</template>