Restructures the campaign page

src/components/layout/TabbedLayout.tsx

@@ -15,12 +15,10 @@ export function TabbedLayout({
   flyout,
 }: Props) {
   return (
-    <div className="grow p-2 flex flex-col">
+    <div className="grow p-2 flex flex-col gap-2">
-      <div>
+      <div className="flex flex-row gap-2">{navigation}</div>
-        <div className="flex flex-row gap-2">{navigation}</div>
+      <div>{title}</div>
-        <div>{title}</div>
+      <div className="flex flex-row justify-start grow">
-      </div>
-      <div className="flex flex-row justify-start m-2 grow">
         <div className="shrink-0 grow-0 w-40 p-0">{tabs}</div>
         <div
           className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`}

src/routes/_app/_authenticated/campaigns.$campaignId.tsx

@@ -5,6 +5,7 @@ import { SessionRow } from "@/components/documents/session/SessionRow";
 import { Button } from "@headlessui/react";
 import { Loader } from "@/components/Loader";
 import type { Campaign, Relationship, Session } from "@/lib/types";
+import { Tab, TabbedLayout } from "@/components/layout/TabbedLayout";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/campaigns/$campaignId",
@@ -80,44 +81,60 @@ function RouteComponent() {
   }
 
   return (
-    <div className="max-w-xl mx-auto py-8">
+    <TabbedLayout
-      <div className="mb-2">
+      title={
+        <h2 className="text-2xl font-bold text-slate-100">{campaign.name}</h2>
+      }
+      navigation={
         <Link
           to="/campaigns"
           className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors"
         >
           ← Back to campaigns
         </Link>
-      </div>
+      }
-      <h2 className="text-2xl font-bold mb-4 text-slate-100">
+      tabs={[
-        {campaign.name}
+        <Tab
-      </h2>
+          label="sessions"
-      <div className="flex justify-between">
+          active
-        <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
+          to="/campaigns/$campaignId"
+          params={{
+            campaignId: campaign.id,
+          }}
+        />,
+      ]}
+      content={
         <div>
-          <Button
+          <div className="flex justify-between">
-            onClick={() => createNewSession()}
+            <h3 className="text-lg font-semibold mb-2 text-slate-200">
-            className="inline-flex items-center justify-center rounded bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-400"
+              Sessions
-          >
+            </h3>
-            New Session
+            <div>
-          </Button>
+              <Button
+                onClick={() => createNewSession()}
+                className="inline-flex items-center justify-center rounded bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-400"
+              >
+                New Session
+              </Button>
+            </div>
+          </div>
+          {sessions && sessions.length > 0 ? (
+            <div>
+              <ul className="space-y-2">
+                {sessions.map((s: any) => (
+                  <li key={s.id}>
+                    <SessionRow session={s} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : (
+            <div className="text-slate-400">
+              No sessions found for this campaign.
+            </div>
+          )}
         </div>
-      </div>
+      }
-      {sessions && sessions.length > 0 ? (
+    />
-        <div>
-          <ul className="space-y-2">
-            {sessions.map((s: any) => (
-              <li key={s.id}>
-                <SessionRow session={s} />
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : (
-        <div className="text-slate-400">
-          No sessions found for this campaign.
-        </div>
-      )}
-    </div>
   );
 }