Stars change

Author: AllanKoder

resources/js/Components/Resources/ResourceCard.vue

@@ -9,7 +9,8 @@ import {
     platformLabels,
 } from "@/Helpers/labels";
 import { platformIcons, pricingIcons, difficultyIcons } from "@/Helpers/icons";
-import ResourceThumbnail from "./ResourceThumbnail.vue";
+import ResourceThumbnail from "@/Components/Resources/ResourceThumbnail.vue";
+import StarRating from "@/Components/StarRating/StarRating.vue";
 
 const props = defineProps({
     resource: {
@@ -81,7 +82,7 @@ const emit = defineEmits(["upvote", "downvote"]);
                 <!-- Primary info row -->
                 <div class="flex items-center gap-2 mb-1">
                     <Icon
-                        icon="mdi:star"
+                        icon="mdi:label-outline"
                         width="14"
                         height="14"
                         class="text-primary"
@@ -221,21 +222,22 @@ const emit = defineEmits(["upvote", "downvote"]);
                         "
                         class="flex items-center gap-1 hover:text-primary transition-colors"
                     >
-                        <Icon
-                            icon="mdi:star"
-                            width="16"
-                            height="16"
-                            class="text-primary"
+                        <StarRating
+                            :model-value="
+                                Number(
+                                    resource.review_summary
+                                        ?.overall_rating
+                                )
+                            "
+                            :size="16"
                         />
-                        {{
-                            Number(
-                                resource.review_summary?.overall_rating || 0
-                            ).toFixed(1)
-                        }}
-                        ({{
-                            resource.review_summary?.review_count || 0
-                        }}
+                        <span>
+
+                            ({{
+                                resource.review_summary?.review_count || 0
+                            }}
                         reviews)
+                    </span>
                     </ClickableHeading>
                 </div>
             </div>

resources/js/Components/Resources/ResourceOverview.vue

@@ -8,6 +8,7 @@ import {
     pricingLabels,
     difficultyLabels,
 } from "@/Helpers/labels";
+import StarRating from "@/Components/StarRating/StarRating.vue";
 
 const props = defineProps({
     resource: {
@@ -268,22 +269,15 @@ const props = defineProps({
                         v-if="props.resource.review_summary?.overall_rating > 0"
                         class="flex items-center gap-1"
                     >
-                        <Icon
-                            icon="mdi:star"
-                            width="16"
-                            height="16"
-                            class="text-primary"
-                        />
-                        <span
-                            class="font-medium text-gray-900 dark:text-gray-100"
-                        >
-                            {{
+                        <StarRating
+                            :model-value="
                                 Number(
                                     props.resource.review_summary
-                                        ?.overall_rating || 0
-                                ).toFixed(1)
-                            }}
-                        </span>
+                                        ?.overall_rating
+                                )
+                            "
+                            :size="16"
+                        />
                         <span class="text-gray-500 dark:text-gray-400">
                             ({{
                                 props.resource.review_summary?.review_count || 0

resources/js/Components/StarRating/StarRating.vue

@@ -27,23 +27,20 @@ const getStarClass = (type) =>
 
 <template>
     <div class="inline-flex items-center flex-wrap gap-1">
-        <span class="text-sm font-medium text-gray-600 dark:text-gray-200">
-            {{ formattedRating }}
-        </span>
         <div class="inline-flex items-center">
             <!-- Full stars -->
             <Icon
             v-for="i in stars.full"
             :key="'full-' + i"
-            icon="material-symbols:star-rounded"
+            icon="mdi:star"
             :class="getStarClass('full')"
             :width="size"
             :height="size"
             />
             <!-- Half star -->
             <Icon
             v-if="stars.hasHalf"
-            icon="material-symbols:star-half-rounded"
+            icon="mdi:star-half-full"
             :class="getStarClass('half')"
             :width="size"
             :height="size"
@@ -52,11 +49,12 @@ const getStarClass = (type) =>
             <Icon
             v-for="i in stars.empty"
             :key="'empty-' + i"
-            icon="material-symbols:star-outline-rounded"
+            icon="mdi:star-outline"
             :class="getStarClass('empty')"
             :width="size"
             :height="size"
             />
         </div>
+        {{ formattedRating }}
     </div>
 </template>