60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
|
|
/**
|
|
* PlatformSwitcher
|
|
*
|
|
* Works on BOTH:
|
|
* - /parts/[partRole] (default browse route)
|
|
* - /parts/[platform]/[partRole] (canonical route)
|
|
*
|
|
* Behavior:
|
|
* - If you're on /parts/[partRole], switching platform navigates to /parts/[platform]/[partRole]
|
|
* (so your URL becomes explicit/shareable).
|
|
* - If you're already on /parts/[platform]/[partRole], it swaps the platform segment.
|
|
*/
|
|
export default function PlatformSwitcher(props: {
|
|
currentPlatform: string;
|
|
partRole: string;
|
|
// If true, we keep query params when switching (nice for sort/paging)
|
|
preserveQuery?: boolean;
|
|
}) {
|
|
const { currentPlatform, partRole, preserveQuery = true } = props;
|
|
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
|
|
const queryString = useMemo(() => {
|
|
if (!preserveQuery) return "";
|
|
const q = searchParams?.toString();
|
|
return q ? `?${q}` : "";
|
|
}, [searchParams, preserveQuery]);
|
|
|
|
function go(platform: string) {
|
|
// We always navigate to canonical to keep it simple & consistent
|
|
router.push(`/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}${queryString}`);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs uppercase tracking-[0.14em] text-zinc-500">Platform</span>
|
|
<select
|
|
value={currentPlatform}
|
|
onChange={(e) => go(e.target.value)}
|
|
className="rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-amber-400"
|
|
>
|
|
<option value="AR-15">AR-15</option>
|
|
<option value="AR-10">AR-10</option>
|
|
<option value="AR-9">AR-9</option>
|
|
<option value="AK-47">AK-47</option>
|
|
</select>
|
|
|
|
<span className="ml-2 text-[0.7rem] text-zinc-500">
|
|
{pathname}
|
|
</span>
|
|
</div>
|
|
);
|
|
} |