"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: "Sarah Chen",    email: "[email protected]",    avatarUrl: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&auto=format&fit=crop",    initials: "SC",    status: "member",  },  {    name: "Alex Morgan",    email: "[email protected]",    avatarUrl: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&auto=format&fit=crop",    initials: "AM",    status: "member",  },  {    name: "David Park",    email: "[email protected]",    avatarUrl: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&auto=format&fit=crop",    initials: "DP",    status: "member",  },  {    name: "Emily Watson",    email: "[email protected]",    avatarUrl: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&auto=format&fit=crop",    initials: "EW",    status: "member",  },];export const title = "React Dialog Block Invite Members";export default function DialogInviteMembers() {  const [open, setOpen] = useState(false);  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button>Invite Members</Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle className="font-semibold text-foreground">            Invite members          </DialogTitle>          <DialogDescription className="text-sm leading-6 text-muted-foreground">            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="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />              <Input                id="inviteEmail"                className="h-10 pl-9"                placeholder="Add email..."                type="email"              />            </div>            <Button type="submit" className="h-10">              Invite            </Button>          </div>        </form>        <h4 className="mt-4 text-sm font-medium text-foreground">          People with existing access        </h4>        <ul className="divide-y">          {members.map((member) => (            <li              key={member.name}              className="flex items-center justify-between py-2.5"            >              <div className="flex items-center space-x-3">                <Avatar className="h-9 w-9">                  <AvatarImage src={member.avatarUrl} alt={member.name} />                  <AvatarFallback>{member.initials}</AvatarFallback>                </Avatar>                <span className="font-medium text-foreground">                  {member.name}                </span>              </div>              <Badge                variant="outline"                className="bg-background text-xs font-medium"              >                {member.status}              </Badge>            </li>          ))}        </ul>      </DialogContent>    </Dialog>  );}