Rating

const [value, setValue] = useState(4);
const [hovered, setHovered] = useState(0);
const preview = hovered || value;

<div role="radiogroup" aria-label="Rate buena mono">
  {[1, 2, 3, 4, 5].map((star) => (
    <button
      key={star}
      role="radio"
      aria-checked={value === star}
      onMouseEnter={() => setHovered(star)}
      onClick={() => setValue(star)}
      className={star <= preview ? "text-warning" : "text-text-tertiary"}
    >
      <Star filled={star <= preview} />
    </button>
  ))}
</div>