59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const nav = [
|
|
{ name: "Profile", href: "/account/profile" },
|
|
{ name: "Security", href: "/account/security" },
|
|
{ name: "My Vault", href: "/vault" },
|
|
{ name: "Favorite Parts", href: "/account/favorites" },
|
|
];
|
|
|
|
export default function AccountLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="min-h-screen bg-black text-zinc-50">
|
|
<div className="mx-auto max-w-6xl px-4 py-10">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-xs tracking-[0.25em] uppercase text-zinc-400">
|
|
Account
|
|
</div>
|
|
<h1 className="mt-2 text-3xl font-semibold">Settings & Profile</h1>
|
|
<p className="mt-2 text-sm text-zinc-400">
|
|
Profile, password, and account settings.
|
|
</p>
|
|
</div>
|
|
|
|
<Link
|
|
href="/builder"
|
|
className="rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm hover:bg-white/10"
|
|
>
|
|
← Back to Builder
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-10 grid grid-cols-1 gap-8 lg:grid-cols-12">
|
|
{/* Sidebar */}
|
|
<aside className="lg:col-span-3">
|
|
<nav className="rounded-xl border border-white/10 bg-white/5 p-2">
|
|
{nav.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block rounded-lg px-3 py-2 text-sm text-zinc-200 hover:bg-white/5"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* Content */}
|
|
<main className="lg:col-span-9">{children}</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |