Emoji reaction rating

<script setup lang="ts">
import { ref } from "vue"
import { cn } from "@/lib/utils"

const emojis = [
  { value: 1, emoji: "😞", label: "Terrible" },
  { value: 2, emoji: "😕", label: "Bad" },
  { value: 3, emoji: "😐", label: "Okay" },
  { value: 4, emoji: "😊", label: "Good" },
  { value: 5, emoji: "🤩", label: "Amazing" },
]

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

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col items-center gap-3">
    <p class="text-sm font-medium">How was your experience?</p>
    <div class="flex gap-2">
      <button
        v-for="item in emojis"
        :key="item.value"
        type="button"
        :class="
          cn(
            'rounded-lg flex size-10 items-center justify-center border-2 text-2xl transition-all',
            selected === item.value
              ? 'border-border bg-muted scale-110'
              : 'hover:bg-muted border-transparent'
          )
        "
        @click="selected = item.value"
      >
        {{ item.emoji }}
      </button>
    </div>
    <p v-if="selected" class="text-muted-foreground text-sm">
      {{ emojis.find((e) => e.value === selected)?.label }}
    </p>
  </div>
</template>