{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-07",
  "type": "registry:block",
  "title": "Dialog with Member List",
  "description": "A dialog with member list block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "alert-dialog",
    "button",
    "input",
    "label"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/dialogs/dialog-07.tsx",
      "type": "registry:component",
      "target": "components/dialog-07.tsx",
      "content": "'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FormEvent, useState } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/components/ui/alert-dialog';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function Dialog08() {\n  const [open, setOpen] = useState(true);\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setOpen(false);\n  };\n\n  return (\n    <AlertDialog onOpenChange={setOpen} open={open}>\n      <AlertDialogTrigger render={<Button variant=\"destructive\" />}>\n        Deactivate 2FA\n      </AlertDialogTrigger>\n      <AlertDialogContent className=\"sm:max-w-lg\">\n        <AlertDialogHeader>\n          <AlertDialogTitle className=\"text-balance\">\n            Deactivate two-step authentication\n          </AlertDialogTitle>\n          <AlertDialogDescription className=\"text-pretty\">\n            Enter your password to deactivate the two-step authentication login.\n            Make sure to have your smartphone ready.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <form className=\"space-y-4\" onSubmit={handleSubmit}>\n          <div>\n            <Label className=\"font-medium text-sm\" htmlFor=\"email\">\n              Email\n            </Label>\n            <Input\n              className=\"mt-2\"\n              disabled\n              id=\"email\"\n              name=\"email\"\n              placeholder=\"ephraim@blocks.so\"\n              type=\"email\"\n            />\n          </div>\n          <div>\n            <Label className=\"font-medium text-sm\" htmlFor=\"password\">\n              Confirm password\n            </Label>\n            <div className=\"relative mt-2\">\n              <Input\n                className=\"pe-9\"\n                id=\"password\"\n                name=\"password\"\n                placeholder=\"Password\"\n                required\n                type={isVisible ? 'text' : 'password'}\n              />\n              <button\n                aria-controls=\"password\"\n                aria-label={isVisible ? 'Hide password' : 'Show password'}\n                aria-pressed={isVisible}\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md\"\n                onClick={toggleVisibility}\n                type=\"button\"\n              >\n                {isVisible ? (\n                  <EyeOffIcon aria-hidden=\"true\" size={16} />\n                ) : (\n                  <EyeIcon aria-hidden=\"true\" size={16} />\n                )}\n              </button>\n            </div>\n          </div>\n\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <Button type=\"submit\" variant=\"destructive\">\n              Deactivate\n            </Button>\n          </AlertDialogFooter>\n        </form>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"
    }
  ],
  "categories": [
    "dialogs"
  ]
}