Dialog with Email and Password Fields

'use client';

import { UserPlus } from 'lucide-react';
import { useState } from 'react';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';

const members = [
  {
    name: 'Ephraim Duncan',
    email: 'ephraim@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-01.png',
    initials: 'ED',
    status: 'member',
  },
  {
    name: 'Lucas Smith',
    email: 'lucas@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-03.png',
    initials: 'LS',
    status: 'member',
  },
  {
    name: 'Timur Ercan',
    email: 'timur@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-02.jpg',
    initials: 'TE',
    status: 'member',
  },
  {
    name: 'Catalin Pit',
    email: 'catalin@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-04.jpg',
    initials: 'CP',
    status: 'member',
  },
];

export default function Dialog07() {
  const [open, setOpen] = useState(true);

  return (
    <Dialog onOpenChange={setOpen} open={open}>
      <DialogTrigger render={<Button onClick={() => setOpen(true)} />}>
        Invite members
      </DialogTrigger>
      <DialogContent className="sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-balance font-semibold text-foreground">
            Invite members
          </DialogTitle>
          <DialogDescription className="text-pretty text-muted-foreground text-sm leading-6">
            Add new team members to your workspace. Please consider your
            organization&apos;s policies when adding external people.
          </DialogDescription>
        </DialogHeader>
        <form>
          <div className="flex w-full items-center space-x-2">
            <div className="relative flex-1">
              <UserPlus className="-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-muted-foreground" />
              <Input
                className="h-10 pl-9"
                id="inviteEmail"
                placeholder="Add email..."
                type="email"
              />
            </div>
            <Button className="h-10" type="submit">
              Invite
            </Button>
          </div>
        </form>
        <h4 className="mt-4 text-balance font-medium text-foreground text-sm">
          People with existing access
        </h4>
        <ul className="divide-y">
          {members.map((member) => (
            <li
              className="flex items-center justify-between py-2.5"
              key={member.name}
            >
              <div className="flex items-center space-x-3">
                <Avatar className="h-9 w-9">
                  <AvatarImage alt={member.name} src={member.avatarUrl} />
                  <AvatarFallback>{member.initials}</AvatarFallback>
                </Avatar>
                <span className="font-medium text-foreground">
                  {member.name}
                </span>
              </div>
              <Badge
                className="bg-background font-medium text-xs"
                variant="outline"
              >
                {member.status}
              </Badge>
            </li>
          ))}
        </ul>
      </DialogContent>
    </Dialog>
  );
}