reui-blocks/blocks/settings-notifications1.tsx

import { Bell, Mail, Smartphone } from "lucide-react";

import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface NotificationSettingItem {
  id: string;
  title: string;
  description: string;
  email: boolean;
  app: boolean;
}

interface NotificationSettingsTableProps {
  notificationSettings: NotificationSettingItem[];
}

const NotificationSettingsTable = ({
  notificationSettings,
}: NotificationSettingsTableProps) => {
  return (
    <Table>
      <TableHeader>
        <TableRow className="[&_div]:flex [&_div]:items-center [&_div]:justify-center [&_div]:gap-1 [&_div]:font-semibold [&_div]:text-muted-foreground/80 [&_div_svg]:size-4">
          <TableHead>
            <div className="!justify-start">
              <Bell /> موضوع اطلاع‌رسانی
            </div>
          </TableHead>
          <TableHead>
            <div>
              <Mail /> ایمیل
            </div>
          </TableHead>
          <TableHead>
            <div>
              <Smartphone /> اپلیکیشن
            </div>
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {notificationSettings.map((notification) => {
          return (
            <TableRow key={notification.id}>
              <TableCell>
                <p className="font-semibold">{notification.title}</p>
                <p className="text-xs font-medium text-muted-foreground/70">
                  {notification.description}
                </p>
              </TableCell>
              <TableCell className="text-center">
                <Checkbox defaultChecked={notification.email} />
              </TableCell>
              <TableCell className="text-center">
                <Checkbox defaultChecked={notification.app} />
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

interface SettingsNotifications1Props {
  heading?: string;
  subHeading?: string;
  className?: string;
  notificationSettings?: NotificationSettingItem[];
}

const SettingsNotifications1 = ({
  heading = "اعلان‌ها",
  subHeading = "تنظیمات ایمیل و اعلان‌های فوری خود را مدیریت کنید.",
  notificationSettings = [
    {
      id: "mentions",
      title: "ارجاع مستقیم",
      description:
        "وقتی هم‌تیمی شما را به یک لید، تسک یا گفت‌وگو ارجاع می‌دهد، مطلع شوید.",
      email: true,
      app: true,
    },
    {
      id: "replies",
      title: "پاسخ به نظرات",
      description: "وقتی دیگران به گفت‌وگوهای شما پاسخ می‌دهند، به‌روزرسانی دریافت کنید.",
      email: true,
      app: true,
    },
    {
      id: "access-requests",
      title: "درخواست‌های دسترسی",
      description:
        "از درخواست‌های مجوز و تغییر وضعیت تأیید مطلع بمانید.",
      email: true,
      app: true,
    },
    {
      id: "task-assignments",
      title: "تکالیف جدید",
      description: "وقتی وظیفه یا موردی به شما محول می‌شود، مطلع شوید.",
      email: true,
      app: true,
    },
    {
      id: "shared-items",
      title: "محتوای اشتراک‌گذاری‌شده",
      description:
        "وقتی همکاران فایل، لینک یا محتوای دیگری با شما به اشتراک می‌گذارند، مطلع شوید.",
      email: true,
      app: true,
    },
  ],
  className,
}: SettingsNotifications1Props) => {
  return (
    <section className="py-32">
      <div
        className={cn(
          "container max-w-4xl space-y-10 tracking-tight",
          className,
        )}
      >
        <div className="space-y-2">
          <h3 className="text-xl font-semibold">{heading}</h3>
          <p className="font-medium text-muted-foreground">{subHeading}</p>
        </div>

        <div className="flex w-full items-center justify-between gap-4 border-y py-10">
          <div>
            <p className="font-semibold">خلاصه صبحگاهی</p>
            <p className="text-sm font-medium text-muted-foreground">
              مروری روزانه بر برجسته‌ترین فعالیت‌ها و مهلت‌های پیش رو.
            </p>
          </div>
          <Switch />
        </div>

        <div className="space-y-4">
          <p className="text-lg font-semibold">هشدارهای فعالیت تیم</p>

          <NotificationSettingsTable
            notificationSettings={notificationSettings}
          />
        </div>
      </div>
    </section>
  );
};

export { SettingsNotifications1 };