added new with header prop

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>
+</template>