{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "passkey-item",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "dialog",
    "@launch/launch-types"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/passkey-item.tsx",
      "content": "import { KeyRound, Trash2 } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n    Dialog,\n    DialogClose,\n    DialogContent,\n    DialogDescription,\n    DialogFooter,\n    DialogTitle,\n    DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport type { Passkey } from \"@/lib/types\";\n\ntype Props = {\n    passkey: Passkey;\n    onDelete: (id: number, onError: () => void) => void;\n};\n\nexport default function PasskeyItem({ passkey, onDelete }: Props) {\n    const [isDeleting, setIsDeleting] = useState(false);\n\n    const handleDelete = () => {\n        setIsDeleting(true);\n        onDelete(passkey.id, () => setIsDeleting(false));\n    };\n\n    return (\n        <div className=\"flex items-center justify-between border-b p-4 last:border-b-0\">\n            <div className=\"flex items-center gap-4\">\n                <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-muted\">\n                    <KeyRound className=\"h-5 w-5 text-muted-foreground\" />\n                </div>\n                <div className=\"space-y-1\">\n                    <div className=\"flex items-center gap-2.5\">\n                        <p className=\"font-medium tracking-tight\">{passkey.name}</p>\n                        {passkey.authenticator && (\n                            <span className=\"inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-[11px] font-medium tracking-wide text-muted-foreground uppercase ring-1 ring-border ring-inset\">\n                                {passkey.authenticator}\n                            </span>\n                        )}\n                    </div>\n                    <p className=\"text-sm text-muted-foreground\">\n                        Added {passkey.created_at_diff}\n                        {passkey.last_used_at_diff && (\n                            <>\n                                <span className=\"mx-1 text-muted-foreground/50\">/</span>\n                                Last used {passkey.last_used_at_diff}\n                            </>\n                        )}\n                    </p>\n                </div>\n            </div>\n\n            <Dialog>\n                <DialogTrigger\n                    render={\n                        <Button\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"text-destructive hover:bg-destructive/10 hover:text-destructive\"\n                        />\n                    }\n                >\n                    <Trash2 className=\"h-4 w-4\" />\n                    <span className=\"sr-only\">Remove</span>\n                </DialogTrigger>\n                <DialogContent>\n                    <DialogTitle>Remove passkey</DialogTitle>\n                    <DialogDescription>\n                        Are you sure you want to remove the \"{passkey.name}\" passkey? You will no\n                        longer be able to use it to sign in.\n                    </DialogDescription>\n                    <DialogFooter className=\"gap-2\">\n                        <DialogClose render={<Button variant=\"secondary\" />}>Cancel</DialogClose>\n                        <Button variant=\"destructive\" onClick={handleDelete} disabled={isDeleting}>\n                            {isDeleting ? \"Removing...\" : \"Remove passkey\"}\n                        </Button>\n                    </DialogFooter>\n                </DialogContent>\n            </Dialog>\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}