65 lines
3.0 KiB
TypeScript
65 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import type {ReactNode} from 'react';
|
|
import Link from 'next/link';
|
|
import {usePathname, useRouter} from 'next/navigation';
|
|
import {Button} from 'antd';
|
|
import {DashboardOutlined, FileTextOutlined, LogoutOutlined, UserOutlined} from '@ant-design/icons';
|
|
import {useAuth} from '@/app/context/AuthContext';
|
|
import {useLanguage} from '@/app/context/LanguageContext';
|
|
import {accountCopy} from '@/data/account';
|
|
|
|
export default function DashboardShell({children}: {children: ReactNode}) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const auth = useAuth();
|
|
const {locale} = useLanguage();
|
|
const copy = accountCopy[locale];
|
|
const links = [
|
|
{href: '/dashboard', label: copy.dashboard, icon: <DashboardOutlined />},
|
|
{href: '/dashboard/orders', label: copy.orders, icon: <FileTextOutlined />},
|
|
{href: '/dashboard/profile', label: copy.profile, icon: <UserOutlined />},
|
|
];
|
|
const active = (href: string) => (href === '/dashboard' ? pathname === href : pathname.startsWith(href));
|
|
return (
|
|
<main className="max-w-7xl mx-auto min-h-[75vh] px-5 md:px-8 pt-28 pb-20">
|
|
<div className="grid lg:grid-cols-[240px,minmax(0,1fr)] gap-7 items-start">
|
|
<aside className="lg:sticky lg:top-28 rounded-2xl border border-subtle bg-elevated p-4">
|
|
<div className="px-3 py-3 border-b border-subtle mb-3">
|
|
<p className="font-bold text-primary">{auth.session?.profile.firstName || copy.account}</p>
|
|
<p className="text-sm text-secondary mt-1" dir="ltr">
|
|
{auth.session?.profile.phone}
|
|
</p>
|
|
</div>
|
|
<nav className="flex lg:flex-col gap-2 overflow-x-auto no-scrollbar">
|
|
{links.map(link => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`flex items-center gap-2 whitespace-nowrap px-4 py-3 rounded-xl transition-colors ${active(link.href) ? 'bg-brand text-ink-950 font-bold' : 'text-secondary hover:bg-surface-strong hover:text-primary'}`}
|
|
>
|
|
{link.icon}
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<Button
|
|
className="mt-3"
|
|
type="text"
|
|
danger
|
|
icon={<LogoutOutlined />}
|
|
onClick={() => {
|
|
auth.logout();
|
|
router.push('/');
|
|
}}
|
|
block
|
|
>
|
|
{copy.logout}
|
|
</Button>
|
|
</aside>
|
|
<section className="min-w-0">{children}</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|