{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-badge",
  "title": "animated-badge",
  "description": "An animated badge component.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/eldoraui/animated-badge.tsx",
      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { ChevronRight } from \"lucide-react\"\nimport { motion } from \"motion/react\"\n\ntype AnimatedBadgeProps = {\n  text?: string\n  color?: string // hex or css color value\n  href?: string // optional redirect link\n}\n\nfunction hexToRgba(hexColor: string, alpha: number): string {\n  const hex = hexColor.replace(\"#\", \"\")\n  if (hex.length === 3) {\n    const r = parseInt(hex[0] + hex[0], 16)\n    const g = parseInt(hex[1] + hex[1], 16)\n    const b = parseInt(hex[2] + hex[2], 16)\n    return `rgba(${r}, ${g}, ${b}, ${alpha})`\n  }\n  if (hex.length === 6) {\n    const r = parseInt(hex.substring(0, 2), 16)\n    const g = parseInt(hex.substring(2, 4), 16)\n    const b = parseInt(hex.substring(4, 6), 16)\n    return `rgba(${r}, ${g}, ${b}, ${alpha})`\n  }\n  return hexColor\n}\n\nconst AnimatedBadge = ({\n  text = \"Introducing Eldoraui\",\n  color = \"#22d3ee\",\n  href,\n}: AnimatedBadgeProps) => {\n  const content = (\n    <motion.div\n      initial={false}\n      whileInView={{\n        opacity: 1,\n        y: 0,\n        filter: \"blur(0px)\",\n      }}\n      transition={{\n        duration: 0.3,\n        delay: 0.1,\n        ease: \"easeInOut\",\n      }}\n      viewport={{ once: true }}\n      className=\"group relative flex max-w-fit items-center justify-center gap-3 rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700 transition-colors dark:border-neutral-700/80 dark:bg-black dark:text-zinc-300\"\n    >\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-full h-20 w-[165px]\">\n        <svg\n          className=\"h-full w-full\"\n          width=\"100%\"\n          height=\"100%\"\n          viewBox=\"0 0 50 50\"\n          fill=\"none\"\n        >\n          {/* <g stroke=\"#fff\" strokeWidth=\"0.4\">\n              <path d=\"M 69 49.8 h -30 q -3 0 -3 -3 v -15 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -15 q 0 -3 -3 -3 h -30\" />\n            </g> */}\n          <g mask=\"url(#ml-mask-1)\">\n            <circle\n              className=\"multiline ml-light-1\"\n              cx=\"0\"\n              cy=\"0\"\n              r=\"20\"\n              fill=\"url(#ml-white-grad)\"\n            />\n          </g>\n          <defs>\n            <mask id=\"ml-mask-1\">\n              <path\n                d=\"M 69 49.8 h -30 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -30\"\n                strokeWidth=\"0.6\"\n                stroke=\"white\"\n              />\n            </mask>\n            <radialGradient id=\"ml-white-grad\" fx=\"1\">\n              <stop offset=\"0%\" stopColor={color} />\n              <stop offset=\"20%\" stopColor={color} />\n              <stop offset=\"100%\" stopColor=\"transparent\" />\n            </radialGradient>\n          </defs>\n        </svg>\n      </div>\n      <div\n        className=\"relative flex h-1 w-1 items-center justify-center rounded-full\"\n        style={{ backgroundColor: hexToRgba(color, 0.4) }}\n      >\n        <div\n          className=\"flex h-2 w-2 animate-ping items-center justify-center rounded-full\"\n          style={{ backgroundColor: color }}\n        >\n          <div\n            className=\"flex h-2 w-2 animate-ping items-center justify-center rounded-full\"\n            style={{ backgroundColor: color }}\n          ></div>\n        </div>\n        <div\n          className=\"absolute top-1/2 left-1/2 flex h-1 w-1 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full\"\n          style={{ backgroundColor: hexToRgba(color, 0.8) }}\n        ></div>\n      </div>\n      <div className=\"mx-2 h-4 w-px bg-neutral-300 dark:bg-neutral-600/80\" />\n      <span className=\"bg-clip-text text-xs font-medium\">{text}</span>\n      <ChevronRight className=\"ml-1 h-3.5 w-3.5 text-neutral-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-neutral-500\" />\n    </motion.div>\n  )\n  return (\n    <>\n      {href ? (\n        <Link href={href} className=\"inline-block\">\n          {content}\n        </Link>\n      ) : (\n        content\n      )}\n      <style>\n        {`    \n.multiline {\n  offset-anchor: 10px 0px;\n  animation: multiline-animation-path;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: 3s;\n}\n\n.ml-light-1 {\n  offset-path: path(\n    \"M 69 49.8 h -30 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -50\"\n  );\n}\n\n@keyframes multiline-animation-path {\n  0% {\n    offset-distance: 0%;\n  }\n  50% {\n    offset-distance: 100%;\n  }\n  100% {\n    offset-distance: 100%;\n  }\n}`}\n      </style>\n    </>\n  )\n}\n\nexport default AnimatedBadge\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}