Interactive half-star rating

<script setup lang="ts">
import { ref } from "vue"
import { Rating } from "@/components/reui/rating"

const rating = ref(3.5)
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col items-center gap-4">
    <Rating v-model:rating="rating" :editable="true" />
    <p class="text-muted-foreground text-sm">
      Your rating: <span class="text-foreground font-semibold">{{ rating.toFixed(1) }}</span> / 5
    </p>
  </div>
</template>