81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { Switch } from "@/components/ui/switch";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface NotificationItem {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
enabled: boolean;
|
|
}
|
|
|
|
interface SettingsNotifications2Props {
|
|
heading?: string;
|
|
subHeading?: string;
|
|
className?: string;
|
|
notifications?: NotificationItem[];
|
|
}
|
|
|
|
const SettingsNotifications2 = ({
|
|
heading = "ترجیحات اعلان",
|
|
subHeading = "کانال‌ها و نوع پیام‌هایی که می‌خواهید دریافت کنید را انتخاب کنید.",
|
|
notifications = [
|
|
{
|
|
id: "email-updates",
|
|
title: "به‌روزرسانی ایمیلی",
|
|
description: "ایمیل‌های مهم درباره فعالیت حساب و رویدادهای امنیتی را دریافت کنید.",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: "push-notifications",
|
|
title: "اعلان پوش",
|
|
description: "هشدارهای فوری لید و تیکت را روی موبایل دریافت کنید.",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: "weekly-digest",
|
|
title: "گزارش هفتگی",
|
|
description: "خلاصه عملکرد پایپ‌لاین و بینش‌های هفتگی تیم را دریافت کنید.",
|
|
enabled: false,
|
|
},
|
|
{
|
|
id: "marketing-emails",
|
|
title: "اخبار محصول",
|
|
description: "نکات بهره‌وری، قابلیت‌های جدید و پیشنهادهای ویژه را دریافت کنید.",
|
|
enabled: false,
|
|
},
|
|
],
|
|
className,
|
|
}: SettingsNotifications2Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("w-full py-32", className)}>
|
|
<div className="w-full px-4 sm:px-6 lg:px-8">
|
|
<div className="flex w-full flex-col gap-8 tracking-tight">
|
|
<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="divide-y">
|
|
{notifications.map((notification) => (
|
|
<div
|
|
key={notification.id}
|
|
className="flex items-center justify-between gap-4 py-4"
|
|
>
|
|
<div className="space-y-0.5">
|
|
<p className="font-medium">{notification.title}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{notification.description}
|
|
</p>
|
|
</div>
|
|
<Switch defaultChecked={notification.enabled} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { SettingsNotifications2 };
|