feat: review modal

frontend/src/components/Rating.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="flex text-center">
         <div v-for="index in 5">
-            <Star class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer hover:fill-orange-500" @input="handleChange"/>
+            <Star :class="{'fill-orange-500': index <= rating}"
+                class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer" @click="markRating(index)"/>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+<script setup>
 import { Star } from 'lucide-vue-next'
-
+import { ref } from 'vue'
 const props = defineProps({
     id: {
         type: String,
@@ -17,18 +17,19 @@ const props = defineProps({
     },
     modelValue: {
         type: String,
-        default: '',
+        default: 0,
     },
 })
 
 const emit = defineEmits(['update:modelValue'])
-const attrs = useAttrs()
+let rating = ref(props.modelValue)
 
-let emitChange = (value: string) => {
+let emitChange = (value) => {
     emit('update:modelValue', value)
 }
 
-let handleChange = (e: Event) => {
-    emitChange((e.target as HTMLInputElement).value)
+function markRating(index) {
+    emitChange(index);
+    rating.value = index;
 }
 </script>