reui-blocks/blocks/invite-user2.tsx

"use client";

import { CornerDownLeft, UserRoundPlus } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface InviteUser2Props {
  heading?: string;
  className?: string;
}

const InviteUser2 = ({
  heading = "دعوت کاربران",
  className,
}: InviteUser2Props) => {
  const users = [
    {
      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>
        <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>{user.email}</TableCell>
                <TableCell>{user.role}</TableCell>
                <TableCell>{user.status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <Sheet>
          <SheetTrigger asChild>
            <Button className="w-fit">دعوت کاربران</Button>
          </SheetTrigger>
          <SheetContent
            side="right"
            className={cn(
              "flex h-full w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-lg",
              className,
            )}
          >
            <SheetHeader className="border-b px-6 py-4 text-start">
              <SheetTitle className="flex items-center gap-2 font-semibold">
                <UserRoundPlus className="size-4" />
                {heading}
              </SheetTitle>
              <SheetDescription className="sr-only">
                با وارد کردن آدرس ایمیل، کاربران را به تیم دعوت کنید
              </SheetDescription>
            </SheetHeader>
            <form
              autoComplete="off"
              onSubmit={(e) => e.preventDefault()}
              className="flex flex-1 flex-col gap-6 overflow-y-auto bg-muted pt-6"
            >
              <div className="space-y-1 px-6">
                <Label className="text-xs">آدرس ایمیل</Label>
                <Textarea
                  dir="rtl"
                  style={{
                    resize: "none",
                    minHeight: "100px",
                  }}
                  placeholder="آدرس‌های ایمیل را وارد کنید..."
                  className="bg-background text-end"
                />
              </div>
              <div className="space-y-1 px-6">
                <Label className="text-xs">تعیین نقش</Label>
                <Select defaultValue="collaborator">
                  <SelectTrigger className="w-full bg-background">
                    <SelectValue placeholder="انتخاب نقش" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="collaborator">همکار</SelectItem>
                    <SelectItem value="administrator">مدیر</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex px-6">
                <Button type="submit">
                  ارسال دعوت‌نامه
                  <CornerDownLeft className="rtl:rotate-180" />
                </Button>
              </div>
            </form>
          </SheetContent>
        </Sheet>
      </div>
    </section>
  );
};

export { InviteUser2 };