From 471d0bdb54fd6298d4a35b81ef3cd9f240343bff Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Mon, 21 Apr 2025 21:15:20 +0330
Subject: [PATCH] Add limit for product card colors

---
 .../components/global/product/ProductCard.vue | 45 ++++++++-----------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index 745cdb8..f96e0dc 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -22,11 +22,17 @@ type Props = {
 // props
 
 const props = defineProps<Props>();
-const { id } = toRefs(props);
+const { id, colors } = toRefs(props);
 
 // state
 
 const { colorObject } = useImageColor(`#product-image-${id.value}`);
+
+// computed
+
+const limitedColors = computed(() => {
+    return colors.value.slice(0, 3);
+});
 </script>
 
 <template>
@@ -51,33 +57,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                     <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" />
+                        <Rate
+                            v-if="rate"
+                            :rate="rate"
+                        />
                         <Tag v-if="tag">
                             {{ tag }}
                         </Tag>
                     </div>
                     <div
-                        :class="
-                            colorObject?.isLight && !darkLayer
-                                ? 'text-black'
-                                : 'text-white'
-                        "
+                        :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"
-                            >
+                            <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"
-                                >
+                            <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"
+                                        v-for="color in limitedColors"
                                         :key="color"
                                         :style="{ backgroundColor: color }"
                                         class="!size-5 @[280px]:!size-6"
@@ -93,18 +92,12 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                     </div>
                 </div>
 
-                <div
-                    class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden"
-                >
+                <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"
-                        >
+                    <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>