{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-rating-8","type":"registry:block","title":"Emoji reaction rating","description":"Emoji reaction rating","dependencies":["cn"],"registryDependencies":[],"files":[{"path":"c-rating-8.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { cn } from \"cn\"\n\nconst emojis = [\n  { value: 1, emoji: \"😞\", label: \"Terrible\" },\n  { value: 2, emoji: \"😕\", label: \"Bad\" },\n  { value: 3, emoji: \"😐\", label: \"Okay\" },\n  { value: 4, emoji: \"😊\", label: \"Good\" },\n  { value: 5, emoji: \"🤩\", label: \"Amazing\" },\n]\n\nexport function Pattern() {\n  const [selected, setSelected] = useState<number | null>(null)\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-xs flex-col items-center gap-3\">\n      <p className=\"text-sm font-medium\">How was your experience?</p>\n      <div className=\"flex gap-2\">\n        {emojis.map((item) => (\n          <button\n            key={item.value}\n            type=\"button\"\n            onClick={() => setSelected(item.value)}\n            className={cn(\n              \"rounded-lg flex size-10 items-center justify-center border-2 text-2xl transition-all\",\n              selected === item.value\n                ? \"border-border bg-muted scale-110\"\n                : \"hover:bg-muted border-transparent\"\n            )}\n          >\n            {item.emoji}\n          </button>\n        ))}\n      </div>\n      {selected && (\n        <p className=\"text-muted-foreground text-sm\">\n          {emojis.find((e) => e.value === selected)?.label}\n        </p>\n      )}\n    </div>\n  )\n}","target":"components/examples/c-rating-8.tsx"}],"meta":{"order":8}}