reui-blocks/blocks/invite-user4.tsx

"use client";

import { Check, Copy } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  status: string;
}

interface CopyLinkCardProps {
  inviteLink: string;
}

const CopyLinkCard = ({ inviteLink }: CopyLinkCardProps) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    setCopied(true);
    navigator.clipboard.writeText(inviteLink);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="space-y-4 rounded-md border bg-muted p-4 text-start">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="font-medium">ارسال لینک</p>
          <p className="text-sm text-muted-foreground">
            هر کسی با این لینک می‌تواند دسترسی داشته باشد
          </p>
        </div>
        <Select defaultValue="view">
          <SelectTrigger className="!bg-background">
            <SelectValue placeholder="نقش" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="view">دسترسی مشاهده</SelectItem>
            <SelectItem value="edit">دسترسی ویرایش</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="flex items-center justify-between rounded-sm border bg-background py-1 pe-1 ps-3">
        <p dir="rtl" className="text-sm text-end">{inviteLink}</p>
        <Button
          variant="ghost"
          size="icon-sm"
          onClick={handleCopy}
          disabled={copied}
        >
          {copied ? <Check className="text-green-500" /> : <Copy />}
        </Button>
      </div>
    </div>
  );
};

const InviteForm = () => {
  return (
    <form
      autoComplete="off"
      onSubmit={(e) => e.preventDefault()}
      className="flex flex-col gap-2.5 text-start"
    >
      <Label>دعوت با ایمیل</Label>
      <div className="flex w-full gap-2">
        <Input
          required
          name="email"
          type="email"
          dir="rtl"
          placeholder="ali.rezaei@example.ir"
          className="text-end"
        />

        <Button type="submit">دعوت</Button>
      </div>
    </form>
  );
};

interface UsersTableProps {
  users: User[];
}

const UsersTable = ({ users }: UsersTableProps) => {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>نام</TableHead>
          <TableHead>ایمیل</TableHead>
          <TableHead>نقش</TableHead>
          <TableHead>وضعیت</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell className="font-medium">{user.name}</TableCell>
            <TableCell dir="rtl" className="text-end">{user.email}</TableCell>
            <TableCell>{user.role}</TableCell>
            <TableCell>{user.status}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

interface InviteUser4Props {
  heading?: string;
  inviteLink?: string;
  className?: string;
}

const InviteUser4 = ({
  heading = "دعوت کاربر",
  inviteLink = "https://www.ShadcnBlocks",
  className,
}: InviteUser4Props) => {
  const users: User[] = [
    {
      id: 1,
      name: "سارا رضایی",
      email: "sarah.j@company.com",
      role: "مدیر",
      status: "فعال",
    },
    {
      id: 2,
      name: "مایکل چن",
      email: "m.chen@company.com",
      role: "همکار",
      status: "دعوت‌شده",
    },
  ];

  return (
    <section className="py-32">
      <div className="container flex flex-col gap-6">
        <div className="text-start">
          <h2 className="text-xl font-semibold tracking-tight">اعضای تیم</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            مدیریت و دعوت کاربران به تیم
          </p>
        </div>

        <UsersTable users={users} />

        <Dialog>
          <DialogTrigger asChild>
            <Button className="w-fit">{heading}</Button>
          </DialogTrigger>
          <DialogContent className={cn("gap-0 overflow-hidden p-0", className)}>
            <DialogTitle className="flex items-center gap-2 border-b bg-muted px-4 py-3 text-base font-medium">
              {heading}
            </DialogTitle>
            <div className="space-y-5 p-4 pt-5">
              <CopyLinkCard inviteLink={inviteLink} />

              <InviteForm />
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </section>
  );
};

export { InviteUser4 };