{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "post-engagement",
  "type": "registry:block",
  "title": "Post Engagement",
  "description": "A component for displaying post engagement stats like comments, likes, reposts, etc.",
  "files": [
    {
      "path": "src/components/deso/post-engagement.tsx",
      "content": "import * as React from 'react';\nimport {\n  Heart,\n  MessageSquare,\n  Repeat2,\n  BarChart2,\n  LucideIcon,\n  Gem,\n} from 'lucide-react';\nimport { cn } from '@/lib/utils/deso';\nimport NumberFlow, { continuous, type Format } from '@number-flow/react';\n\ntype EngagementVariant =\n  | 'like'\n  | 'repost'\n  | 'comment'\n  | 'diamond'\n  | 'view'\n\ninterface PostEngagementProps {\n  variant: EngagementVariant;\n  count: number;\n  active?: boolean;\n  onClick?: () => void;\n  className?: string;\n  value?: string;\n  abbreviate?: boolean;\n  decimals?: number;\n  size?: 'sm' | 'md' | 'lg';\n  layout?: 'row' | 'column';\n}\n\nconst variantConfig: {\n    [key in EngagementVariant]: {\n    Icon: LucideIcon;\n    activeColor?: string;\n    fillClass?: string;\n    hoverBgClass?: string;\n  };\n} = {\n  comment: {\n    Icon: MessageSquare,\n    activeColor: 'text-blue-500',\n    hoverBgClass: 'hover:before:bg-blue-500/10',\n  },\n  like: {\n    Icon: Heart,\n    activeColor: 'text-pink-500',\n    fillClass: 'fill-pink-500',\n    hoverBgClass: 'hover:before:bg-pink-500/10',\n  },\n  repost: {\n    Icon: Repeat2,\n    activeColor: 'text-green-500',\n    hoverBgClass: 'hover:before:bg-green-500/10',\n  },\n  diamond: {\n    Icon: Gem,\n    activeColor: 'text-blue-400',\n    hoverBgClass: 'hover:before:bg-blue-400/10',\n  },\n  view: { Icon: BarChart2 },\n};\n\nexport function PostEngagement({\n  variant,\n  count,\n  active = false,\n  onClick,\n  className,\n  value,\n  abbreviate = true,\n  decimals = 1,\n  size = 'sm',\n  layout = 'row',\n}: PostEngagementProps) {\n  const config = variantConfig[variant];\n\n  const numberFormat: Format = {\n    notation: abbreviate ? 'compact' : 'standard',\n    compactDisplay: 'short',\n    maximumFractionDigits: decimals,\n  };\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={!onClick && variant !== 'view'}\n      className={cn(\n        'group cursor-pointer relative flex items-center text-muted-foreground transition-colors',\n        layout === 'row' ? 'gap-1.5' : 'flex-col gap-1',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        size === 'lg' && 'text-base',\n        'disabled:pointer-events-none disabled:opacity-50',\n        onClick && 'hover:text-foreground',\n        { [config.activeColor!]: active && config.activeColor },\n        className\n      )}\n    >\n      <div\n        className={cn(\n          \"relative rounded-full before:content-[''] before:absolute before:-inset-1.5 before:rounded-full before:transition-colors\",\n          config.hoverBgClass\n        )}\n      >\n        <config.Icon\n          className={cn('transition-transform group-active:scale-90', {\n            [config.fillClass!]: active && config.fillClass, \n            'h-5 w-5': size === 'sm',\n            'h-6 w-6': size === 'md',\n            'h-7 w-7': size === 'lg',\n          })}\n        />\n      </div>\n\n      {(count > 0 || variant === 'view') && (\n        <NumberFlow\n          value={count}\n          format={numberFormat}\n          plugins={[continuous]}\n          className={cn(layout === 'column' && 'text-center')}\n        />\n      )}\n      {value && (\n        <span className={cn(\n          \"text-muted-foreground/80\", \n          size === 'sm' && 'text-xs', \n          size === 'md' && 'text-sm', \n          size === 'lg' && 'text-base',\n          layout === 'column' && 'text-center'\n        )}>{value}</span>\n      )}\n    </button>\n  );\n} ",
      "type": "registry:component",
      "target": "src/components/deso-ui/post-engagement.tsx"
    }
  ]
}