{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-08",
  "type": "registry:block",
  "title": "Dialog with Email and Password Fields",
  "description": "A dialog with email and password fields block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "dialog",
    "input"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/dialogs/dialog-08.tsx",
      "type": "registry:component",
      "target": "components/dialog-08.tsx",
      "content": "'use client';\n\nimport { UserPlus } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\n\nconst members = [\n  {\n    name: 'Ephraim Duncan',\n    email: 'ephraim@documenso.com',\n    avatarUrl: 'https://blocks.so/avatar-01.png',\n    initials: 'ED',\n    status: 'member',\n  },\n  {\n    name: 'Lucas Smith',\n    email: 'lucas@documenso.com',\n    avatarUrl: 'https://blocks.so/avatar-03.png',\n    initials: 'LS',\n    status: 'member',\n  },\n  {\n    name: 'Timur Ercan',\n    email: 'timur@documenso.com',\n    avatarUrl: 'https://blocks.so/avatar-02.jpg',\n    initials: 'TE',\n    status: 'member',\n  },\n  {\n    name: 'Catalin Pit',\n    email: 'catalin@documenso.com',\n    avatarUrl: 'https://blocks.so/avatar-04.jpg',\n    initials: 'CP',\n    status: 'member',\n  },\n];\n\nexport default function Dialog07() {\n  const [open, setOpen] = useState(true);\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger render={<Button onClick={() => setOpen(true)} />}>\n        Invite members\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-2xl\">\n        <DialogHeader>\n          <DialogTitle className=\"text-balance font-semibold text-foreground\">\n            Invite members\n          </DialogTitle>\n          <DialogDescription className=\"text-pretty text-muted-foreground text-sm leading-6\">\n            Add new team members to your workspace. Please consider your\n            organization&apos;s policies when adding external people.\n          </DialogDescription>\n        </DialogHeader>\n        <form>\n          <div className=\"flex w-full items-center space-x-2\">\n            <div className=\"relative flex-1\">\n              <UserPlus className=\"-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-muted-foreground\" />\n              <Input\n                className=\"h-10 pl-9\"\n                id=\"inviteEmail\"\n                placeholder=\"Add email...\"\n                type=\"email\"\n              />\n            </div>\n            <Button className=\"h-10\" type=\"submit\">\n              Invite\n            </Button>\n          </div>\n        </form>\n        <h4 className=\"mt-4 text-balance font-medium text-foreground text-sm\">\n          People with existing access\n        </h4>\n        <ul className=\"divide-y\">\n          {members.map((member) => (\n            <li\n              className=\"flex items-center justify-between py-2.5\"\n              key={member.name}\n            >\n              <div className=\"flex items-center space-x-3\">\n                <Avatar className=\"h-9 w-9\">\n                  <AvatarImage alt={member.name} src={member.avatarUrl} />\n                  <AvatarFallback>{member.initials}</AvatarFallback>\n                </Avatar>\n                <span className=\"font-medium text-foreground\">\n                  {member.name}\n                </span>\n              </div>\n              <Badge\n                className=\"bg-background font-medium text-xs\"\n                variant=\"outline\"\n              >\n                {member.status}\n              </Badge>\n            </li>\n          ))}\n        </ul>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
    }
  ],
  "categories": [
    "dialogs"
  ]
}