72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
|
// components/portal/RigsSwitcher.tsx
|
|||
|
|
"use client";
|
|||
|
|
|
|||
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
import RigsListClient from "@/app/rigs/RigsListClient";
|
|||
|
|
|
|||
|
|
const TABS = [
|
|||
|
|
{ key: "my", label: "My Rigs" },
|
|||
|
|
{ key: "add", label: "Add Rig" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
function Panel({ tab }: { tab: string }) {
|
|||
|
|
switch (tab) {
|
|||
|
|
case "my":
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-md border p-4">
|
|||
|
|
<RigsListClient />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
case "add":
|
|||
|
|
// Placeholder: we’ll retrofit the builder (or a minimal create form) next sprint
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-md border p-4 space-y-3">
|
|||
|
|
<div className="text-sm opacity-70">
|
|||
|
|
Add Rig form will go here. We’ll wire to <code>POST /api/my/rigs</code> with user auth.
|
|||
|
|
</div>
|
|||
|
|
<ul className="text-sm list-disc pl-5 opacity-70">
|
|||
|
|
<li>Fields: name (required), rig_type (required), optional notes</li>
|
|||
|
|
<li>Use <code>/api/options/user_rig_type</code> for types</li>
|
|||
|
|
<li>On success: refresh list tab</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
default:
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function RigsSwitcher() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const sp = useSearchParams();
|
|||
|
|
const active = sp.get("t") || "my";
|
|||
|
|
|
|||
|
|
function setTab(nextKey: string) {
|
|||
|
|
const q = new URLSearchParams(sp.toString());
|
|||
|
|
q.set("t", nextKey);
|
|||
|
|
router.replace(`/portal/rigs?${q.toString()}`, { scroll: false });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="mb-4 flex flex-wrap items-center gap-2">
|
|||
|
|
{TABS.map(({ key, label }) => (
|
|||
|
|
<button
|
|||
|
|
key={key}
|
|||
|
|
onClick={() => setTab(key)}
|
|||
|
|
className={cn(
|
|||
|
|
"rounded-md border px-3 py-1.5 text-sm transition",
|
|||
|
|
active === key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{label}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Panel tab={active} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|