Rating scale using numerical buttons

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

const rating = ref<number | null>(null)
</script>

<template>
  <div class="space-y-3">
    <p class="text-sm font-medium">How likely are you to recommend us?</p>
    <ButtonGroup>
      <Button
        v-for="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
        :key="n"
        variant="outline"
        size="icon-sm"
        :class="
          rating === n &&
          'bg-primary hover:bg-primary hover:text-primary-foreground hover:border-primary text-primary-foreground border-primary'
        "
        @click="rating = n"
      >
        {{ n }}
      </Button>
    </ButtonGroup>
    <div class="text-muted-foreground flex justify-between text-xs">
      <span>Not likely</span>
      <span>Very likely</span>
    </div>
  </div>
</template>