Sentiment Radio Group

import {
  RadioGroup,
  SentimentCard,
} from "@/components/ruixen/sentiment-radio-group";
 
export default function App() {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">How did it go?</h2>
 
      <RadioGroup defaultValue="neutral">
        <SentimentCard
          value="angry"
          emoji="😠"
          title="Angry"
          description="Frustrated or upset with the experience."
        />
        <SentimentCard
          value="sad"
          emoji="🙁"
          title="Sad"
          description="Something didn't meet expectations."
        />
        <SentimentCard
          value="neutral"
          emoji="😐"
          title="Neutral"
          description="Neither good nor bad, just okay."
        />
        <SentimentCard
          value="happy"
          emoji="🙂"
          title="Happy"
          description="Satisfied and had a good experience."
        />
        <SentimentCard
          value="delighted"
          emoji="😀"
          title="Delighted"
          description="Loved it, exceeded expectations!"
        />
      </RadioGroup>
    </div>
  );
}