{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "verify-badge",
  "title": "Verify Badge",
  "author": "AlgorizeTech",
  "description": "A small verified checkmark badge with an optional draw-in animation. Use it beside names and handles to mark a confirmed account.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/VerifyBadgeBlock.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Check } from \"lucide-react\";\n\nexport interface VerifyBadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  color?: string;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  animate?: boolean;\n}\n\nexport const VerifyBadge = React.forwardRef<HTMLDivElement, VerifyBadgeProps>(\n  (\n    { color = \"var(--primary)\", size = \"md\", animate = false, className, ...props },\n    ref\n  ) => {\n    const sizeClasses = {\n      sm: \"w-4 h-4\",\n      md: \"w-5 h-5\",\n      lg: \"w-6 h-6\",\n      xl: \"w-8 h-8\",\n    };\n\n    const iconSizeClasses = {\n      sm: \"w-2.5 h-2.5\",\n      md: \"w-3 h-3\",\n      lg: \"w-3.5 h-3.5\",\n      xl: \"w-4 h-4\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative inline-flex items-center justify-center flex-shrink-0 group\",\n          sizeClasses[size],\n          className\n        )}\n        {...props}\n      >\n        {/* Animated Shine/Ping effect */}\n        {animate && (\n          <div\n            className=\"absolute inset-0 rounded-full animate-ping opacity-20 group-hover:opacity-40 transition-opacity\"\n            style={{ backgroundColor: color }}\n          />\n        )}\n        \n        {/* Badge SVG shape (Twitter-like decagon/star) */}\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          className=\"absolute inset-0 w-full h-full\"\n          style={{\n            color: color,\n            filter: \"drop-shadow(0px 1px 1px rgba(0,0,0,0.1))\",\n          }}\n        >\n          <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.92-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.337 2.25c-.416-.165-.866-.25-1.336-.25-2.21 0-3.92 1.79-3.92 4 0 .495.084.965.238 1.4-1.274.65-2.148 2.02-2.148 3.6 0 1.46.74 2.76 1.87 3.45-.094.347-.144.712-.144 1.09 0 2.21 1.71 4 3.92 4 .55 0 1.07-.12 1.54-.33.64 1.25 1.93 2.13 3.44 2.13 1.51 0 2.8-.88 3.44-2.13.47.21 1 .33 1.55.33 2.21 0 3.92-1.79 3.92-4 0-.378-.05-.743-.144-1.09 1.13-.69 1.87-1.99 1.87-3.45z\" />\n        </svg>\n\n        {/* Checkmark inside */}\n        <Check\n          className={cn(\n            \"relative z-10 stroke-[4] text-primary-foreground\",\n            iconSizeClasses[size]\n          )}\n        />\n      </div>\n    );\n  }\n);\n\nVerifyBadge.displayName = \"VerifyBadge\";\n",
      "type": "registry:component",
      "target": "components/custom/blocks/VerifyBadgeBlock.tsx"
    }
  ],
  "docs": "Named export: VerifyBadge. Sizes are sm | md | lg | xl, `color` takes any CSS colour, and `animate` plays the check-draw on mount.",
  "categories": [
    "data-display"
  ],
  "type": "registry:component"
}