Dialog with Email and Password Fields

1'use client';
2 
3import { UserPlus } from 'lucide-react';
4import { useState } from 'react';
5 
6import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
7import { Badge } from '@/components/ui/badge';
8import { Button } from '@/components/ui/button';
9import {
10  Dialog,
11  DialogContent,
12  DialogDescription,
13  DialogHeader,
14  DialogTitle,
15  DialogTrigger,
16} from '@/components/ui/dialog';
17import { Input } from '@/components/ui/input';
18 
19const members = [
20  {
21    name: 'Ephraim Duncan',
22    email: 'ephraim@documenso.com',
23    avatarUrl: 'https://blocks.so/avatar-01.png',
24    initials: 'ED',
25    status: 'member',
26  },
27  {
28    name: 'Lucas Smith',
29    email: 'lucas@documenso.com',
30    avatarUrl: 'https://blocks.so/avatar-03.png',
31    initials: 'LS',
32    status: 'member',
33  },
34  {
35    name: 'Timur Ercan',
36    email: 'timur@documenso.com',
37    avatarUrl: 'https://blocks.so/avatar-02.jpg',
38    initials: 'TE',
39    status: 'member',
40  },
41  {
42    name: 'Catalin Pit',
43    email: 'catalin@documenso.com',
44    avatarUrl: 'https://blocks.so/avatar-04.jpg',
45    initials: 'CP',
46    status: 'member',
47  },
48];
49 
50export default function Dialog07() {
51  const [open, setOpen] = useState(true);
52 
53  return (
54    <Dialog onOpenChange={setOpen} open={open}>
55      <DialogTrigger render={<Button onClick={() => setOpen(true)} />}>
56        Invite members
57      </DialogTrigger>
58      <DialogContent className="sm:max-w-2xl">
59        <DialogHeader>
60          <DialogTitle className="text-balance font-semibold text-foreground">
61            Invite members
62          </DialogTitle>
63          <DialogDescription className="text-pretty text-muted-foreground text-sm leading-6">
64            Add new team members to your workspace. Please consider your
65            organization&apos;s policies when adding external people.
66          </DialogDescription>
67        </DialogHeader>
68        <form>
69          <div className="flex w-full items-center space-x-2">
70            <div className="relative flex-1">
71              <UserPlus className="-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-muted-foreground" />
72              <Input
73                className="h-10 pl-9"
74                id="inviteEmail"
75                placeholder="Add email..."
76                type="email"
77              />
78            </div>
79            <Button className="h-10" type="submit">
80              Invite
81            </Button>
82          </div>
83        </form>
84// … truncated