76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
// components/portal/SettingsSwitcher.tsx
|
|
"use client";
|
|
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import dynamic from "next/dynamic";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* IMPORTANT:
|
|
* We dynamically import the existing settings pages so you do NOT have to move their contents.
|
|
* These imports point directly at your canonical routes:
|
|
* /app/settings/fiber/page.tsx
|
|
* /app/settings/uv/page.tsx
|
|
* /app/settings/co2-galvo/page.tsx
|
|
* /app/settings/co2-gantry/page.tsx
|
|
*
|
|
* If any of those filenames differ, update the paths below accordingly.
|
|
*/
|
|
const FiberPanel = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
|
|
const UVPanel = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
|
|
const CO2GalvoPanel = dynamic(() => import("@/app/settings/co2-galvo/page"), { ssr: false });
|
|
const CO2GantryPanel = dynamic(() => import("@/app/settings/co2-gantry/page"), { ssr: false });
|
|
|
|
const TABS = [
|
|
{ key: "fiber", label: "Fiber" },
|
|
{ key: "uv", label: "UV" },
|
|
{ key: "co2-galvo", label: "CO₂ Galvo" },
|
|
{ key: "co2-gantry", label: "CO₂ Gantry" },
|
|
];
|
|
|
|
function Panel({ tab }: { tab: string }) {
|
|
switch (tab) {
|
|
case "fiber": return <FiberPanel />;
|
|
case "uv": return <UVPanel />;
|
|
case "co2-galvo": return <CO2GalvoPanel />;
|
|
case "co2-gantry": return <CO2GantryPanel />;
|
|
default: return <FiberPanel />;
|
|
}
|
|
}
|
|
|
|
export default function SettingsSwitcher() {
|
|
const router = useRouter();
|
|
const sp = useSearchParams();
|
|
const active = sp.get("t") || "fiber";
|
|
|
|
function setTab(nextKey: string) {
|
|
const q = new URLSearchParams(sp.toString());
|
|
q.set("t", nextKey);
|
|
router.replace(`/portal/laser-settings?${q.toString()}`, { scroll: false });
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* sub-tabs */}
|
|
<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 */}
|
|
<div className="rounded-md border p-4">
|
|
<Panel tab={active} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|