76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useRouter } from "next/navigation";
|
|||
|
|
import { Bell, Shield, HelpCircle, LogOut, ChevronLeft } from "lucide-react";
|
|||
|
|
import { Card } from "@/components/ui/Card";
|
|||
|
|
import { Badge } from "@/components/ui/Badge";
|
|||
|
|
import { Button } from "@/components/ui/Button";
|
|||
|
|
import { useAuth } from "@/lib/auth-context";
|
|||
|
|
|
|||
|
|
const comingSoonItems = [
|
|||
|
|
{ icon: Bell, label: "اعلانها" },
|
|||
|
|
{ icon: Shield, label: "حریم خصوصی و امنیت" },
|
|||
|
|
{ icon: HelpCircle, label: "راهنما و پشتیبانی" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default function SettingsPage() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const { user, logout } = useAuth();
|
|||
|
|
|
|||
|
|
function handleLogout() {
|
|||
|
|
logout();
|
|||
|
|
router.push("/login");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-4 px-5 pt-[calc(env(safe-area-inset-top)+16px)] pb-8">
|
|||
|
|
<h1 className="font-[var(--font-display)] font-extrabold text-[22px] px-1">
|
|||
|
|
تنظیمات ⚙️
|
|||
|
|
</h1>
|
|||
|
|
|
|||
|
|
<Card className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-[13px] text-(--color-content-tertiary)">شماره موبایل</p>
|
|||
|
|
<p dir="ltr" className="text-[15px] font-bold text-(--color-content-primary)">
|
|||
|
|
{user?.phone}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card padded={false} className="overflow-hidden">
|
|||
|
|
{comingSoonItems.map((item, i) => {
|
|||
|
|
const Icon = item.icon;
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
key={item.label}
|
|||
|
|
className={`w-full flex items-center gap-3 px-4 py-3.5 text-right ${
|
|||
|
|
i !== comingSoonItems.length - 1 ? "border-b border-(--color-border-subtle)" : ""
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<Icon size={18} className="text-(--color-content-secondary) shrink-0" />
|
|||
|
|
<span className="flex-1 text-[14px] text-(--color-content-primary)">
|
|||
|
|
{item.label}
|
|||
|
|
</span>
|
|||
|
|
<Badge tone="neutral" className="text-[10px]">
|
|||
|
|
بهزودی
|
|||
|
|
</Badge>
|
|||
|
|
<ChevronLeft size={16} className="text-(--color-content-tertiary)" />
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
variant="tertiary"
|
|||
|
|
size="lg"
|
|||
|
|
isBlock
|
|||
|
|
icon={<LogOut size={17} />}
|
|||
|
|
onClick={handleLogout}
|
|||
|
|
className="!text-(--color-status-error) !border-red-200 mt-4"
|
|||
|
|
>
|
|||
|
|
خروج از حساب
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|