40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { pb } from "@/lib/pocketbase";
|
|
import type { Campaign } from "@/lib/types";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Loader } from "@/components/Loader";
|
|
|
|
export const Route = createFileRoute("/_authenticated/campaigns/")({
|
|
loader: async () => {
|
|
const records = await pb.collection("campaigns").getFullList();
|
|
return { campaigns: records.map((rec: any) => ({ id: rec.id, name: rec.name })) as Campaign[] };
|
|
},
|
|
component: RouteComponent,
|
|
pendingComponent: Loader,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const { campaigns } = Route.useLoaderData();
|
|
|
|
if (!campaigns || campaigns.length === 0) return <div>No campaigns found.</div>;
|
|
|
|
return (
|
|
<div className="max-w-xl mx-auto py-8">
|
|
<h2 className="text-xl font-bold mb-4 text-slate-100">Your Campaigns</h2>
|
|
<ul className="space-y-2">
|
|
{campaigns.map((c) => (
|
|
<li key={c.id}>
|
|
<Link
|
|
to="/campaigns/$campaignId"
|
|
params={{ campaignId: c.id }}
|
|
className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
|
|
>
|
|
{c.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|