62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import Link from "next/link";
|
||
import type { ReactNode } from "react";
|
||
|
||
const navItems = [
|
||
{ href: "/dashboard", label: "Dashboard" },
|
||
{ href: "/watchlist", label: "自选股" },
|
||
{ href: "/recommendations", label: "每日推荐" },
|
||
{ href: "/trading", label: "模拟盘" },
|
||
{ href: "/settings", label: "设置" },
|
||
];
|
||
|
||
const quickLinks = [
|
||
{ href: "/stocks/600519", label: "600519" },
|
||
];
|
||
|
||
export default function ShellLayout({ children }: { children: ReactNode }) {
|
||
return (
|
||
<div className="min-h-dvh bg-background text-foreground">
|
||
<div className="mx-auto flex w-full max-w-6xl gap-6 px-4 py-6">
|
||
<aside className="hidden w-56 shrink-0 md:block">
|
||
<div className="rounded-xl border border-black/10 bg-white/70 p-4 dark:border-white/10 dark:bg-black/30">
|
||
<div className="text-sm font-semibold">Stock Web</div>
|
||
<div className="mt-1 text-xs text-black/60 dark:text-white/60">
|
||
选股系统（MVP）
|
||
</div>
|
||
<nav className="mt-4 flex flex-col gap-1">
|
||
{navItems.map((item) => (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className="rounded-lg px-3 py-2 text-sm transition-colors hover:bg-black/[.04] dark:hover:bg-white/[.06]"
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="mt-6 text-xs font-medium text-black/60 dark:text-white/60">
|
||
快速打开
|
||
</div>
|
||
<div className="mt-2 flex flex-wrap gap-2">
|
||
{quickLinks.map((item) => (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className="rounded-md border border-black/10 px-2 py-1 text-xs hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main className="min-w-0 flex-1 rounded-xl border border-black/10 bg-white/70 p-5 dark:border-white/10 dark:bg-black/30">
|
||
{children}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|