new changes

frontend/components/global/product/ProductCard.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import Tag from "~/components/ui/Tag.vue";
@@ -16,22 +15,25 @@ type Props = {
     picture: string;
     tag?: string;
     rate?: number;
-}
+};
 
 // props
 
 defineProps<Props>();
-
 </script>
 
 <template>
-    <div class="relative h-[500px] w-[400px] rounded-2xl bg-black/10 overflow-hidden p-6">
+    <div
+        class="relative size-full min-h-[31.25rem] rounded-2xl bg-black/10 overflow-hidden p-6"
+    >
         <img
             src="~/assets/img/product-2.jpg"
             class="size-full object-cover absolute inset-0"
             alt="product-background"
         />
-        <div class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0">
+        <div
+            class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0"
+        >
             <Rate v-if="rate">
                 {{ rate }}
             </Rate>
@@ -39,12 +41,12 @@ defineProps<Props>();
                 {{ tag }}
             </Tag>
         </div>
-        <div class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center">
-            <span class="typo-p-md">
-                ${{ price }}
-            </span>
+        <div
+            class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center"
+        >
+            <span class="typo-p-md"> ${{ price }} </span>
             <div class="flex flex-col gap-2 items-end">
-                <span class="typo-p-md ">
+                <span class="typo-p-md">
                     {{ brand }}
                 </span>
                 <span class="typo-sub-h-md">
@@ -54,10 +56,10 @@ defineProps<Props>();
                     <ColorCircle
                         v-for="color in colors"
                         :key="color"
-                        :style="{backgroundColor: color}"
+                        :style="{ backgroundColor: color }"
                     />
                 </div>
             </div>
         </div>
     </div>
-</template>
+</template>