Created Rating and Review Feature as well as added a Top Rated books list to the Stats page

client/components/ui/StarRating.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex items-center" :class="{ 'cursor-pointer': !readonly }">
+    <div v-for="n in 5" :key="n" class="relative px-0.5" @mouseenter="hoverStar(n)" @mouseleave="hoverStar(0)" @click="setRating(n)">
+      <span class="material-symbols text-yellow-400" :style="{ fontSize: size + 'px' }" :class="{ fill: n <= displayRating }">star</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  },
+  data() {
+    return {
+      hoverRating: 0
+    }
+  },
+  computed: {
+    displayRating() {
+      return this.hoverRating || this.value
+    }
+  },
+  methods: {
+    hoverStar(n) {
+      if (this.readonly) return
+      this.hoverRating = n
+    },
+    setRating(n) {
+      if (this.readonly) return
+      this.$emit('input', n)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.material-symbols {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+.material-symbols.fill {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+</style>