60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import dynamic from "next/dynamic";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// these should already exist under components/buying-guide/*
|
|
const BuyingGuideList = dynamic(
|
|
() => import("@/components/buying-guide/BuyingGuideList"),
|
|
{ ssr: false }
|
|
);
|
|
const LaserFinderPanel = dynamic(
|
|
() => import("@/components/buying-guide/LaserFinderPanel"),
|
|
{ ssr: false }
|
|
);
|
|
|
|
const TABS = [
|
|
{ key: "list", label: "Guide" },
|
|
{ key: "finder", label: "Laser Finder" },
|
|
] as const;
|
|
|
|
export default function BuyingGuideSwitcher() {
|
|
const sp = useSearchParams();
|
|
const router = useRouter();
|
|
|
|
const active = useMemo(() => {
|
|
const t = (sp.get("bg") || TABS[0].key).toLowerCase();
|
|
return TABS.some(x => x.key === t) ? t : TABS[0].key;
|
|
}, [sp]);
|
|
|
|
function setTab(k: string) {
|
|
const q = new URLSearchParams(sp.toString());
|
|
q.set("bg", k);
|
|
router.replace(`/portal/buying-guide?${q.toString()}`, { scroll: false });
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex gap-2">
|
|
{TABS.map(t => (
|
|
<button
|
|
key={t.key}
|
|
onClick={() => setTab(t.key)}
|
|
className={cn(
|
|
"rounded-md border px-3 py-1.5 text-sm",
|
|
active === t.key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
|
|
)}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-md border p-4">
|
|
{active === "finder" ? <LaserFinderPanel /> : <BuyingGuideList />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|