{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-badge",
  "title": "Status Badge",
  "description": "component for the Status Badge",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "app/registry/status-badge/statusdemo.tsx",
      "content": "import {\n  CircleCheck,\n  CircleDashed,\n  CircleX,\n  Clock5,\n  ScanSearch,\n  Send,\n  TriangleAlert,\n} from \"lucide-react\";\nimport React from \"react\";\n\nconst statuses = [\n  {\n    label: \"Pending\",\n    icon: TriangleAlert,\n    className:\n      \"bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25\",\n  },\n  {\n    label: \"Failed\",\n    icon: CircleX,\n    className:\n      \"bg-rose-50 text-rose-700 ring-rose-600/20 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-300/25\",\n  },\n  {\n    label: \"Success\",\n    icon: CircleCheck,\n    className:\n      \"bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-300/25\",\n  },\n  {\n    label: \"In progress\",\n    icon: CircleDashed,\n    className:\n      \"bg-sky-50 text-sky-700 ring-sky-600/20 dark:bg-sky-400/10 dark:text-sky-300 dark:ring-sky-300/25\",\n    spin: true,\n  },\n  {\n    label: \"In review\",\n    icon: ScanSearch,\n    className:\n      \"bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-400/10 dark:text-violet-300 dark:ring-violet-300/25\",\n  },\n  {\n    label: \"Submitted\",\n    icon: Send,\n    className:\n      \"bg-indigo-50 text-indigo-700 ring-indigo-600/20 dark:bg-indigo-400/10 dark:text-indigo-300 dark:ring-indigo-300/25\",\n  },\n  {\n    label: \"Expired\",\n    icon: Clock5,\n    className:\n      \"bg-neutral-100 text-neutral-600 ring-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-300 dark:ring-neutral-300/20\",\n  },\n];\n\nconst StatusDemo = () => {\n  return (\n    <div className=\"flex max-w-xl flex-wrap items-center justify-center gap-3\">\n      {statuses.map(({ label, icon: Icon, className, spin }) => (\n        <span\n          key={label}\n          className={`inline-flex select-none items-center gap-1.5 rounded-full px-3 py-1.5 text-[13px] font-medium leading-none ring-1 ring-inset ${className}`}\n        >\n          <Icon\n            className={`size-3.5 shrink-0 ${spin ? \"animate-spin [animation-duration:3s] motion-reduce:animate-none\" : \"\"}`}\n            strokeWidth={2.25}\n            aria-hidden=\"true\"\n          />\n          {label}\n        </span>\n      ))}\n    </div>\n  );\n};\n\nexport default StatusDemo;\n",
      "type": "registry:component",
      "target": "components/spectrumui/statusdemo.tsx"
    }
  ],
  "type": "registry:component"
}