From c706b9d58070baf05e3fc40b31b250d20ed07fa3 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Mar 2025 16:22:33 +0330
Subject: [PATCH] updated style

---
 .../components/global/product/ProductCard.vue | 133 ++++++++++--------
 1 file changed, 72 insertions(+), 61 deletions(-)

diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index ad2e634..a4ed9b7 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import Tag from "~/components/global/Tag.vue";
@@ -10,7 +9,7 @@ import { useImageColor } from "~/composables/global/useImageColor";
 // types
 
 type Props = {
-    id: number,
+    id: number;
     title: string;
     colors: string[];
     price: string;
@@ -28,77 +27,89 @@ const { id } = toRefs(props);
 // state
 
 const { colorObject } = useImageColor(`#product-image-${id.value}`);
-
 </script>
 
 <template>
-    <NuxtLink :to="'/product/' + id">
-        <div class="@container">
-            <div
-                class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
-            >
-
-                <img
-                    :id="`product-image-${id}`"
-                    :src="picture"
-                    class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
-                    alt="product-background"
-                />
-
+    <li class="w-full">
+        <NuxtLink :to="'/product/' + id">
+            <div class="@container">
                 <div
-                    v-if="darkLayer"
-                    class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
-                />
-
-                <div
-                    class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
-                >
-                    <Rate v-if="rate" :rate="rate" />
-                    <Tag v-if="tag">
-                        {{ tag }}
-                    </Tag>
-                </div>
-                <div
-                    :class="
-                        colorObject?.isLight && !darkLayer
-                            ? 'text-black'
-                            : 'text-white'
-                    "
-                    class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
+                    class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
                 >
+                    <img
+                        :id="`product-image-${id}`"
+                        :src="picture"
+                        class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
+                        alt="product-background"
+                    />
 
-                    <div class="flex flex-col gap-2 items-start w-full">
-                        <span class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
-                            {{ title }}
-                        </span>
-                        <div class="flex items-center justify-between w-full mt-1">
-                            <div class="flex items-center gap-2 @[280px]:mt-1">
-                                <ColorCircle
-                                    v-for="color in colors"
-                                    :key="color"
-                                    :style="{ backgroundColor: color }"
-                                    class="!size-5 @[280px]:!size-6"
-                                />
-                            </div>
-                            <span class="@max-[280px]:hidden typo-p-xs @[280px]:typo-p-md !font-semibold whitespace-nowrap">
-                                {{ price }}
+                    <div
+                        v-if="darkLayer"
+                        class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
+                    />
+
+                    <div
+                        class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
+                    >
+                        <Rate v-if="rate" :rate="rate" />
+                        <Tag v-if="tag">
+                            {{ tag }}
+                        </Tag>
+                    </div>
+                    <div
+                        :class="
+                            colorObject?.isLight && !darkLayer
+                                ? 'text-black'
+                                : 'text-white'
+                        "
+                        class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
+                    >
+                        <div class="flex flex-col gap-2 items-start w-full">
+                            <span
+                                class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full"
+                            >
+                                {{ title }}
                             </span>
+                            <div
+                                class="flex items-center justify-between w-full mt-1"
+                            >
+                                <div
+                                    class="flex items-center gap-2 @[280px]:mt-1"
+                                >
+                                    <ColorCircle
+                                        v-for="color in colors"
+                                        :key="color"
+                                        :style="{ backgroundColor: color }"
+                                        class="!size-5 @[280px]:!size-6"
+                                    />
+                                </div>
+                                <span
+                                    class="@max-[280px]:hidden typo-p-xs @[280px]:typo-p-md !font-semibold whitespace-nowrap"
+                                >
+                                    {{ price }}
+                                </span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
-                <span class="typo-sub-h-sm w-full truncate">
-                    {{ title }}
-                </span>
-                <div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
-                    <span class="typo-p-xs !font-semibold whitespace-nowrap">
-                        {{ price }}
+                <div
+                    class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden"
+                >
+                    <span class="typo-sub-h-sm w-full truncate">
+                        {{ title }}
                     </span>
+                    <div
+                        class="@[280px]:hidden flex items-center justify-between w-full mt-1"
+                    >
+                        <span
+                            class="typo-p-xs !font-semibold whitespace-nowrap"
+                        >
+                            {{ price }}
+                        </span>
+                    </div>
                 </div>
             </div>
-
-        </div>
-    </NuxtLink>
+        </NuxtLink>
+    </li>
 </template>