61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
// app/(account)/layout.tsx
|
|
import Link from "next/link";
|
|
import AccountChrome from "./AccountChrome";
|
|
|
|
const nav = [
|
|
{ href: "/account", label: "My Account" },
|
|
{ href: "/account/settings", label: "Settings" },
|
|
{ href: "/vault", label: "My Vault" },
|
|
];
|
|
|
|
export default function AccountLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="min-h-screen">
|
|
<AccountChrome />
|
|
|
|
<div className="mx-auto w-full max-w-6xl px-4 py-6">
|
|
{/* Header */}
|
|
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<div className="text-[11px] uppercase tracking-[0.22em] text-white/50">
|
|
Account
|
|
</div>
|
|
<h1 className="mt-1 text-2xl font-semibold text-white/90">
|
|
Settings & Profile
|
|
</h1>
|
|
<p className="mt-1 text-sm text-white/60">
|
|
Profile, password, and account settings.
|
|
</p>
|
|
</div>
|
|
|
|
<Link
|
|
href="/builder"
|
|
className="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-white/80 hover:bg-white/10"
|
|
>
|
|
← Back to Builder
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-12">
|
|
<aside className="lg:col-span-3 rounded-2xl border border-white/10 bg-white/5 p-4">
|
|
<nav className="flex flex-col gap-1">
|
|
{nav.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="rounded-lg px-3 py-2 text-sm text-white/70 hover:bg-white/10 hover:text-white"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
<main className="lg:col-span-9 rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |