mobiniqow
93f6ea2f07
Phone+OTP auth, staged onboarding, admin-approval-gated home screen, and the full discovery/match/chat UI (swipe deck with drag gestures, match modal, profile detail, filters, messages/chat) wired to the real backend, styled after a Figma dating-app UI kit. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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>
|
||
);
|
||
}
|