{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-2",
  "title": "Alert 2",
  "description": "component for the alert-2",
  "registryDependencies": [
    "alert",
    "button"
  ],
  "files": [
    {
      "path": "app/registry/alerttwo.tsx",
      "content": "import { Alert } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Check, X } from \"lucide-react\";\nimport Image from \"next/image\";\n\nexport default function Alert02() {\n  return (\n    <div className=\"w-full max-w-xl mx-auto\">\n      <Alert className=\"relative bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 shadow-[0_1px_6px_0_rgba(0,0,0,0.02)] rounded-xl p-4\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative h-10 w-10 shrink-0\">\n            <Image\n              src=\"https://img.freepik.com/premium-photo/anime-male-avatar_950633-956.jpg\"\n              alt=\"Arihant jain\"\n              fill\n              className=\"rounded-full object-cover\"\n            />\n            <div className=\"absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white dark:ring-zinc-950\" />\n          </div>\n\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center justify-between gap-4\">\n              <div>\n                <p className=\"text-sm font-medium text-zinc-700 dark:text-zinc-300\">\n                  Team Invitation\n                </p>\n                <p className=\"text-[13px] text-zinc-500 dark:text-zinc-400 mt-0.5\">\n                  Arihant invited you to join{\" \"}\n                  <span className=\"font-medium text-zinc-700 dark:text-zinc-300\">\n                    Design Team\n                  </span>\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {/* Actions */}\n          <div className=\"flex items-center gap-2\">\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              className=\"h-8 w-8 p-0 hover:bg-red-50 dark:hover:bg-red-950/50 text-zinc-400 hover:text-red-600 dark:text-zinc-500 dark:hover:text-red-400 transition-colors\"\n              aria-label=\"Decline invitation\"\n            >\n              <X className=\"h-4 w-4\" />\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              className={cn(\n                \"h-8 w-8 p-0\",\n                \"hover:bg-emerald-50 dark:hover:bg-emerald-950/50\",\n                \"text-zinc-400 hover:text-emerald-600\",\n                \"dark:text-zinc-500 dark:hover:text-emerald-400\",\n                \"transition-colors\",\n              )}\n              aria-label=\"Accept invitation\"\n            >\n              <Check className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"mt-2 ml-14\">\n          <p className=\"text-[12px] text-zinc-400 dark:text-zinc-500\">\n            Invited 5 minutes ago\n          </p>\n        </div>\n      </Alert>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/alerttwo.tsx"
    }
  ],
  "type": "registry:component"
}