Display: Add BaseRating component

assets/css/scss/atoms/_rating.scss

@@ -0,0 +1,44 @@
+.p-rating {
+  @apply relative flex items-center gap-1;
+
+  &-item {
+    @apply inline-flex items-center cursor-pointer outline-none rounded-lg
+      hover:outline-none hover:drop-shadow-lg;
+
+    .p-rating-icon {
+      @apply transition-none text-gray-50;
+
+      font-size: 1rem;
+
+      &.p-icon {
+        @apply w-4 h-4;
+
+        &.p-rating-cancel {
+          @apply text-danger;
+        }
+      }
+    }
+
+    &.p-focus {
+      @apply outline-none drop-shadow-lg;
+    }
+
+    &.p-rating-item-active {
+      & .p-rating-icon {
+        @apply text-warning;
+      }
+    }
+  }
+
+  &.p-readonly &-item {
+    @apply cursor-default;
+  }
+
+  &:not(.p-disabled):not(.p-readonly) &-item:hover &-icon {
+    @apply text-warning;
+  }
+
+  &:not(.p-disabled):not(.p-readonly) &-item:hover &-icon.p-rating-cancel {
+    @apply text-danger;
+  }
+}

assets/css/scss/index.scss

@@ -47,6 +47,7 @@
 @include meta.load-css("atoms/platform_logo");
 @include meta.load-css("atoms/progressbar");
 @include meta.load-css("atoms/radio");
+@include meta.load-css("atoms/rating");
 @include meta.load-css("atoms/skeleton");
 @include meta.load-css("atoms/tags");
 @include meta.load-css("atoms/toast");

assets/vue/components/basecomponents/BaseRating.vue

@@ -0,0 +1,26 @@
+<script setup>
+import Rating from "primevue/rating"
+
+const model = defineModel({
+  type: Number,
+})
+
+defineProps({
+  stars: {
+    type: Number,
+    default: 5,
+    require: false,
+  },
+})
+
+const emit = defineEmits(["change"])
+</script>
+
+<template>
+  <Rating
+    v-model="model"
+    :cancel="false"
+    :stars="stars"
+    @change="emit('change', $event, model)"
+  />
+</template>