Invite Members Dialog

1"use client";
2 
3import { useId, useRef, useState } from "react";
4 
5import { CheckIcon, CopyIcon, UserRoundPlusIcon } from "lucide-react";
6 
7import { Button } from "@/components/ui/button";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import {
11  ResponsiveDialog,
12  ResponsiveDialogContent,
13  ResponsiveDialogDescription,
14  ResponsiveDialogHeader,
15  ResponsiveDialogTitle,
16  ResponsiveDialogTrigger,
17} from "@/components/ui/revola";
18import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
19import { cn } from "@/lib/utils";
20 
21export default function InviteMembersDialog() {
22  const id = useId();
23  const [emails, setEmails] = useState(["mark@yourcompany.com", "jane@yourcompany.com", ""]);
24  const [copied, setCopied] = useState<boolean>(false);
25  const inputRef = useRef<HTMLInputElement>(null);
26  const lastInputRef = useRef<HTMLInputElement>(null);
27 
28  const addEmail = () => {
29    setEmails([...emails, ""]);
30  };
31 
32  const handleEmailChange = (index: number, value: string) => {
33    const newEmails = [...emails];
34    newEmails[index] = value;
35    setEmails(newEmails);
36  };
37 
38  const handleCopy = () => {
39    if (inputRef.current) {
40      navigator.clipboard.writeText(inputRef.current.value);
41      setCopied(true);
42      setTimeout(() => setCopied(false), 1500);
43    }
44  };
45 
46  return (
47    <ResponsiveDialog>
48      <ResponsiveDialogTrigger asChild>
49        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
50          Invite Members
51        </Button>
52      </ResponsiveDialogTrigger>
53      <ResponsiveDialogContent
54        className="sm:max-w-sm"
55        onOpenAutoFocus={(e) => {
56          e.preventDefault();
57          lastInputRef.current?.focus();
58        }}
59      >
60        <div className="space-y-4 overflow-y-auto p-6 max-sm:pt-4">
61          <div className="flex flex-col gap-2">
62            <div className="flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
63              <UserRoundPlusIcon className="opacity-80" size={16} />
64            </div>
65            <ResponsiveDialogHeader className="text-left">
66              <ResponsiveDialogTitle>Invite team members</ResponsiveDialogTitle>
67              <ResponsiveDialogDescription>Invite teammates to earn free components.</ResponsiveDialogDescription>
68            </ResponsiveDialogHeader>
69          </div>
70          <form className="space-y-5">
71            <div className="space-y-4">
72// … truncated