60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
// app/(account)/layout.tsx
|
|
import Link from "next/link";
|
|
|
|
const nav = [
|
|
{ href: "/account", label: "My Account" },
|
|
{ href: "/account/settings", label: "Settings" },
|
|
];
|
|
|
|
export default function AccountLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="min-h-screen">
|
|
<div className="mx-auto max-w-6xl px-4 py-6">
|
|
{/* Header */}
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Account</h1>
|
|
<p className="text-sm opacity-70">
|
|
Profile, password, and account settings.
|
|
</p>
|
|
</div>
|
|
|
|
<Link href="/builder" className="text-sm opacity-80 hover:underline">
|
|
← Back to Builder
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-[240px_1fr]">
|
|
<aside className="rounded-xl border border-white/10 bg-white/5 p-3">
|
|
<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 opacity-80 hover:bg-white/10 hover:opacity-100"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<div className="my-2 border-t border-white/10" />
|
|
<Link
|
|
href="/vault"
|
|
className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
|
|
>
|
|
My Vault
|
|
</Link>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main className="rounded-xl border border-white/10 bg-white/5 p-4">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |