133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
import { Switch } from "@/components/ui/switch";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface NotificationItem {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
enabled: boolean;
|
|
}
|
|
|
|
interface NotificationCategory {
|
|
id: string;
|
|
title: string;
|
|
notifications: NotificationItem[];
|
|
}
|
|
|
|
interface SettingsNotifications3Props {
|
|
heading?: string;
|
|
subHeading?: string;
|
|
className?: string;
|
|
categories?: NotificationCategory[];
|
|
}
|
|
|
|
const SettingsNotifications3 = ({
|
|
heading = "مراکز اعلان",
|
|
subHeading = "برای هر بخش از محصول مشخص کنید چه اعلان‌هایی فعال باشند.",
|
|
categories = [
|
|
{
|
|
id: "activity",
|
|
title: "فعالیت سامانه مدیریت ارتباط با مشتری",
|
|
notifications: [
|
|
{
|
|
id: "comments",
|
|
title: "نظرات روی رکورد",
|
|
description: "وقتی کسی روی لید یا معامله نظر می‌گذارد یا به شما پاسخ می‌دهد.",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: "mentions",
|
|
title: "منشن‌ها",
|
|
description:
|
|
"وقتی همکار شما را در لید، تیکت یا تسک منشن می‌کند.",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: "follows",
|
|
title: "دنبال‌کننده رکورد",
|
|
description: "وقتی کسی رکورد یا گزارش تحت مسئولیت شما را دنبال می‌کند.",
|
|
enabled: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "updates",
|
|
title: "به‌روزرسانی محصول",
|
|
notifications: [
|
|
{
|
|
id: "product-updates",
|
|
title: "قابلیت‌های جدید",
|
|
description: "از امکانات و بهبودهای جدید پلتفرم باخبر شوید.",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: "tips",
|
|
title: "نکات فروش",
|
|
description: "راهنماهای کوتاه برای استفاده بهتر از سامانه مدیریت ارتباط با مشتری و افزایش تبدیل.",
|
|
enabled: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "account",
|
|
title: "حساب و امنیت",
|
|
notifications: [
|
|
{
|
|
id: "security",
|
|
title: "هشدار امنیتی",
|
|
description: "ورود مشکوک، تغییر رمز و رویدادهای حساس حساب.",
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: "billing",
|
|
title: "صورتحساب",
|
|
description: "فاکتور، تمدید اشتراک و وضعیت پرداخت.",
|
|
enabled: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
className,
|
|
}: SettingsNotifications3Props) => {
|
|
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-10 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="space-y-8">
|
|
{categories.map((category) => (
|
|
<div key={category.id} className="space-y-4">
|
|
<h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
|
|
{category.title}
|
|
</h4>
|
|
<div className="divide-y rounded-lg border">
|
|
{category.notifications.map((notification) => (
|
|
<div
|
|
key={notification.id}
|
|
className="flex items-center justify-between gap-4 p-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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { SettingsNotifications3 };
|