makearmy-app/app/portal/laser-settings/Client.tsx
2025-09-27 18:34:59 -04:00

58 lines
1.5 KiB
TypeScript

"use client";
import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";
const SettingsSwitcher = dynamic(
() => import("@/components/portal/SettingsSwitcher"),
{ ssr: false }
);
function DetailsFrame({ src }: { src: string }) {
return (
<iframe
key={src}
src={src}
className="w-full h-[70vh] rounded-md border"
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
/>
);
}
export default function LaserSettingsClient() {
const search = useSearchParams();
const t = (search.get("t") || "fiber").toLowerCase();
const id = search.get("id");
// map tab -> canonical detail route
const detailSrc =
!id
? null
: t === "fiber"
? `/settings/fiber/${id}`
: t === "uv"
? `/settings/uv/${id}`
: t === "co2-galvo"
? `/settings/co2-galvo/${id}`
: t === "co2-gantry"
? `/settings/co2-gantry/${id}`
: null;
return (
<div className="space-y-4">
<div className="rounded-lg border p-6">
<h2 className="mb-4 text-xl font-semibold">Laser Settings</h2>
<SettingsSwitcher />
</div>
{detailSrc && (
<div className="rounded-lg border p-4">
<div className="mb-2 text-sm opacity-70">
Viewing detail #{id} ({t})
</div>
<DetailsFrame src={detailSrc} />
</div>
)}
</div>
);
}