makearmy-app/components/portal/RigsSwitcher.tsx

// components/portal/RigsSwitcher.tsx
"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { cn } from "@/lib/utils";
import RigsListClient from "@/app/rigs/RigsListClient";
import RigBuilderClient from "@/app/rigs/RigBuilderClient";

type Opt = { id: string | number; label: string };

const TABS = [
    { key: "my", label: "My Rigs" },
{ key: "add", label: "Add Rig" },
];

function Panel({ tab, rigTypes }: { tab: string; rigTypes: Opt[] }) {
    switch (tab) {
        case "my":
            return (
                <div className="rounded-md border p-4">
                <RigsListClient />
                </div>
            );
        case "add":
            return (
                <div className="rounded-md border p-4">
                <RigBuilderClient rigTypes={rigTypes} />
                </div>
            );
        default:
            return null;
    }
}

export default function RigsSwitcher({ rigTypes }: { rigTypes: Opt[] }) {
    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} rigTypes={rigTypes} />
        </div>
    );
}