Completes the three-panel layout

src/components/layout/TabbedLayout.tsx

@@ -1,16 +1,67 @@
+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 }: Props) {
+export function TabbedLayout({
+  navigation,
+  title,
+  tabs,
+  content,
+  flyout,
+}: Props) {
   return (
     <div>
-      <div>{navigation}</div>
-      <div>{title}</div>
-      <div>{tabs}</div>
-      <div>{content}</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>
+  );
+}