68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
|
|
export type Props = {
|
|
title: React.ReactNode;
|
|
navigation: React.ReactNode;
|
|
tabs: React.ReactNode[];
|
|
content: React.ReactNode;
|
|
flyout?: React.ReactNode;
|
|
};
|
|
export function TabbedLayout({
|
|
navigation,
|
|
title,
|
|
tabs,
|
|
content,
|
|
flyout,
|
|
}: Props) {
|
|
return (
|
|
<div>
|
|
<div className="">
|
|
<div>{navigation}</div>
|
|
<div>{title}</div>
|
|
</div>
|
|
<div className="flex flex-row justify-start m-2 max-w-5xl">
|
|
<div className="grow max-w-2xs p-0">{tabs}</div>
|
|
<div
|
|
className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`}
|
|
>
|
|
{content}
|
|
</div>
|
|
{flyout && (
|
|
<div
|
|
className="w-lg p-2 bg-slate-800 border border-slate-700 shadow-[0_0_15px_0_rgba(0,0,0,0.5)]"
|
|
style={{
|
|
"margin-left": "-32rem",
|
|
}}
|
|
>
|
|
{flyout}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type TabProps = {
|
|
label: string;
|
|
to: string;
|
|
params: Record<string, any>;
|
|
active?: boolean;
|
|
};
|
|
|
|
const activeTabClass =
|
|
"text-slate-100 font-bold bg-slate-800 border-t border-b border-l";
|
|
const inactiveTabClass = "text-slate-300 bg-slate-900 border";
|
|
|
|
export function Tab({ label, to, params, active }: TabProps) {
|
|
return (
|
|
<Link
|
|
key={label}
|
|
to={to}
|
|
params={params}
|
|
className={`block p-2 border-slate-700 whitespace-nowrap ${active ? activeTabClass : inactiveTabClass}`}
|
|
>
|
|
{label}
|
|
</Link>
|
|
);
|
|
}
|