Rating slider with emoji feedback

<script setup lang="ts">
import { ref, computed } from "vue"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

const emojis = ["😡", "🙁", "😐", "🙂", "😍"]
const labels = ["Awful", "Poor", "Okay", "Good", "Amazing"]

const value = ref(3)
const emoji = computed(() => emojis[value.value - 1])
const label = computed(() => labels[value.value - 1])
</script>

<template>
  <div class="mx-auto grid w-full max-w-sm gap-3">
    <Label class="text-sm font-medium">Rate your experience</Label>
    <div class="flex items-center gap-3">
      <Slider :model-value="[value]" :min="1" :max="5" :step="1" />
      <span class="text-2xl" aria-hidden="true">{{ emoji }}</span>
    </div>
    <span class="text-muted-foreground text-center text-xs font-medium">{{ label }}</span>
  </div>
</template>