136 lines
4.0 KiB
TypeScript
136 lines
4.0 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 className="py-32">
|
|
<div
|
|
className={cn(
|
|
"container max-w-2xl 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="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>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { SettingsNotifications3 };
|