Complete rating component

frontend/components/global/product-detail/Rating.vue

@@ -1,33 +1,33 @@
-<script lang="ts">
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    rate: number
+}
+
+// props
+
+defineProps<Props>();
 
 </script>
 
 <template>
     <div class="flex items-center gap-2">
+        <span class="typo-p-sm">
+            {{ rate }}
+        </span>
         <div class="flex items-center gap-1">
             <Icon
+                v-for="i in Math.round(5 - rate)"
                 name="ci:star-solid"
-                class="size-4.5 **:fill-yellow-500"
-            />
-            <Icon
-                name="ci:star-solid"
-                class="size-4.5 **:fill-yellow-500"
-            />
-            <Icon
-                name="ci:star-solid"
-                class="size-4.5 **:fill-yellow-500"
-            />
-            <Icon
-                name="ci:star-solid"
-                class="size-4.5 **:fill-yellow-500"
+                class="size-4.5 **:fill-slate-300"
             />
             <Icon
+                v-for="i in Math.round(rate)"
                 name="ci:star-solid"
                 class="size-4.5 **:fill-yellow-500"
             />
         </div>
-        <span class="typo-p-sm">
-            5.0
-        </span>
     </div>
 </template>