lots of fixes. cant remember them all

2025-12-18 09:42:25 -05:00
parent 607939c468
commit 4c2d767d09
28 changed files with 3342 additions and 996 deletions
@@ -0,0 +1,60 @@
+"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>
+  );
+}