Adds campaign info to it's details page

src/lib/types.ts

@@ -16,13 +16,25 @@ export type Document = {
   data: {};
 };
 
-export type Session = Document & {
+export type DocumentData<K extends string, V> = {
-  strongStart: string;
+  data: Record<K, V>;
 };
 
+export type Session = Document &
+  DocumentData<
+    "session",
+    {
+      strongStart: string;
+    }
+  >;
+
 export type ISO8601Date = string & { __type: "iso8601date" };
 
-export type Secret = Document & {
+export type Secret = Document &
+  DocumentData<
+    "secret",
+    {
       text: string;
       discoveredOn: ISO8601Date;
-};
+    }
+  >;

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

@@ -1,10 +1,29 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { pb } from "@/lib/pocketbase";
+import type { Campaign } from "@/lib/types";
 
 export const Route = createFileRoute("/_authenticated/campaigns/$campaignId")({
+  loader: async ({ params }) => {
+    const record = await pb.collection("campaigns").getOne(params.campaignId);
+    return { campaign: { id: record.id, name: record.name } as Campaign };
+  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { campaignId } = Route.useParams();
+  const { campaign } = Route.useLoaderData();
-  return <div>Hello "/campaigns/{campaignId}"!</div>;
+  return (
+    <div className="max-w-xl mx-auto py-8">
+      <div className="mb-2">
+        <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">{campaign.name}</h2>
+      {/* More campaign details can go here */}
+    </div>
+  );
 }