{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "post-reactions",
  "type": "registry:block",
  "title": "Post Reactions",
  "description": "A component for displaying post reactions.",
  "files": [
    {
      "path": "src/components/deso/post-reactions.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { Button } from '../ui/button';\nimport { cn } from '@/lib/utils/deso';\nimport { SmilePlus } from 'lucide-react';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\nexport interface Reaction {\n  emoji: string;\n  count: number;\n  userHasReacted: boolean;\n}\n\nexport const EMOJI_MAP: Record<string, string> = {\n  '👍': 'Thumbs Up',\n  '👎': 'Thumbs Down',\n  '😂': 'Tears of Joy',\n  '😢': 'Loudly Crying Face',\n  '🔥': 'Fire',\n  '😈': 'Smiling Face with Horns',\n  '🤯': 'Mind Blown',\n};\n\nexport interface PostReactionsProps {\n  reactions: Reaction[];\n  onReactionClick: (emoji: string) => void;\n  className?: string;\n}\n\nexport function PostReactionList({ reactions, onReactionClick, className }: PostReactionsProps) {\n  return (\n    <div className={cn(\n      className,\n      reactions.length > 0 && 'flex items-center gap-2 flex-wrap'\n    )}>\n      {reactions.map(\n        ({ emoji, count, userHasReacted }) =>\n          count > 0 && (\n            <Button\n              key={emoji}\n              variant={userHasReacted ? 'secondary' : 'outline'}\n              size=\"sm\"\n              onClick={() => onReactionClick(emoji)}\n              className=\"rounded-full px-3 h-8\"\n            >\n              <span className=\"mr-2 text-md\">{emoji}</span>\n              <span className=\"text-xs font-semibold\">{count}</span>\n            </Button>\n          )\n      )}\n    </div>\n  );\n}\n\nexport function PostReactionTrigger({ onReactionClick, className }: { onReactionClick: (emoji: string) => void; className?: string }) {\n  return (\n    <Popover>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className={cn('rounded-full h-8 w-8 border border-border', className)}>\n              <SmilePlus className=\"h-4 w-4 text-muted-foreground\" />\n            </Button>\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add a reaction</p>\n        </TooltipContent>\n      </Tooltip>\n      <PopoverContent className=\"p-2 w-auto border border-border\">\n        <div className=\"flex gap-2\">\n          {Object.keys(EMOJI_MAP).map((emoji) => (\n            <Button\n              key={emoji}\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => onReactionClick(emoji)}\n              className=\"text-xl\"\n            >\n              {emoji}\n            </Button>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n// Default export: all-in-one layout for backward compatibility\nexport default function PostReactions({ reactions, onReactionClick, className }: PostReactionsProps) {\n  return (\n    <div className={cn('flex items-center gap-2 mt-4 flex-wrap', className)}>\n      {reactions.length > 0 && <PostReactionList reactions={reactions} onReactionClick={onReactionClick} />}\n      <PostReactionTrigger onReactionClick={onReactionClick} />\n    </div>\n  );\n} ",
      "type": "registry:component",
      "target": "src/components/deso-ui/post-reactions.tsx"
    }
  ]
}