setting up dark/white mode. fixed some other small things
This commit is contained in:
+102
-26
@@ -1,15 +1,34 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* BuilderNav.tsx
|
||||
* -----------------------------------------------------------------------------
|
||||
* Top navigation for the Builder experience.
|
||||
*
|
||||
* MAJOR LAYOUT IDEA:
|
||||
* - Keep all primary nav items on the LEFT
|
||||
* - Put *everything else* (search, viewing state, theme toggle later, user menu later)
|
||||
* into a RIGHT "actions cluster" using a single `ml-auto` wrapper.
|
||||
*
|
||||
* WHY:
|
||||
* - Prevents multiple `ml-auto` elements fighting each other
|
||||
* - Makes the right side easy to extend without breaking alignment
|
||||
*/
|
||||
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { CATEGORIES } from "@/data/gunbuilderParts";
|
||||
import type { Category } from "@/types/gunbuilder";
|
||||
|
||||
type BuilderNavProps = {
|
||||
// Optional override if a parent wants to force the active category
|
||||
activeCategoryId?: string | null;
|
||||
};
|
||||
|
||||
// Helper to group categories for the dropdowns
|
||||
/**
|
||||
* Helper: group categories for dropdowns.
|
||||
* This assumes your Category has a `group` field like "lower" | "upper" | "accessories".
|
||||
*/
|
||||
function groupCategories(group: "lower" | "upper" | "accessories"): Category[] {
|
||||
return CATEGORIES.filter((c) => c.group === group);
|
||||
}
|
||||
@@ -17,32 +36,43 @@ function groupCategories(group: "lower" | "upper" | "accessories"): Category[] {
|
||||
export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// ---- Data / derived state --------------------------------------------------
|
||||
const lower = groupCategories("lower");
|
||||
const upper = groupCategories("upper");
|
||||
const accessories = groupCategories("accessories");
|
||||
|
||||
// Determine which category is "active" so we can highlight dropdown items
|
||||
// and show the "Viewing" indicator on the right.
|
||||
const currentCategory =
|
||||
activeCategoryId ?? searchParams.get("category") ?? undefined;
|
||||
|
||||
// Base route for parts browsing (used for dropdown links + "Clear")
|
||||
const baseHref = "/parts";
|
||||
|
||||
/**
|
||||
* Dropdown renderer (hover-based).
|
||||
* - Uses Tailwind `group` + `group-hover` to show/hide the menu.
|
||||
* - Highlights the active item.
|
||||
*/
|
||||
const renderDropdown = (label: string, items: Category[]) => {
|
||||
if (!items.length) return null;
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
{/* Dropdown trigger */}
|
||||
<button
|
||||
type="button"
|
||||
className={`inline-flex items-center gap-1 font-medium tracking-wide transition-colors uppercase text-[11px] ${
|
||||
items.some(cat => cat.id === currentCategory)
|
||||
className={`inline-flex items-center gap-1 font-medium tracking-wide uppercase text-[11px] transition-colors ${
|
||||
items.some((cat) => cat.id === currentCategory)
|
||||
? "text-white"
|
||||
: "text-neutral-200 hover:text-white"
|
||||
: "text-neutral-300 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
<span className="text-[9px]">▾</span>
|
||||
</button>
|
||||
|
||||
{/* Dropdown menu */}
|
||||
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all absolute left-0 mt-2 rounded-md border border-neutral-800 bg-black/95 shadow-xl z-40 min-w-[220px]">
|
||||
<ul className="py-2 text-sm">
|
||||
{items.map((cat) => {
|
||||
@@ -51,12 +81,11 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
|
||||
<li key={cat.id}>
|
||||
<Link
|
||||
href={`${baseHref}/${cat.id}`}
|
||||
className={[
|
||||
"block w-full px-3 py-1.5 text-left text-sm transition-colors",
|
||||
className={`block w-full px-3 py-1.5 transition-colors ${
|
||||
isActive
|
||||
? "bg-neutral-800 text-white"
|
||||
: "text-neutral-300 hover:bg-neutral-800 hover:text-white",
|
||||
].join(" ")}
|
||||
: "text-neutral-300 hover:bg-neutral-800 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{cat.name}
|
||||
</Link>
|
||||
@@ -70,11 +99,23 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto w-full"> {/* ← aligns with topnav */}
|
||||
/**
|
||||
* Outer container matches TopNav width:
|
||||
* - max-w-6xl mx-auto w-full ensures consistent alignment across app
|
||||
*/
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
{/**
|
||||
* FLEX STRATEGY:
|
||||
* - Everything before the RIGHT cluster is "left side"
|
||||
* - Then a single `ml-auto` cluster pushes everything else to the right
|
||||
*/}
|
||||
<nav className="flex items-center gap-6 border-b border-neutral-900 px-6 py-3 text-sm backdrop-blur-sm">
|
||||
{/* Primary builder link */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* LEFT SIDE: primary nav */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<Link
|
||||
href={'/builder'}
|
||||
href="/builder"
|
||||
className="font-semibold text-neutral-100 hover:text-white tracking-[0.25em] uppercase text-[11px]"
|
||||
>
|
||||
Builder
|
||||
@@ -91,22 +132,57 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
|
||||
Builds
|
||||
</Link>
|
||||
|
||||
{/* Right → Current filter */}
|
||||
{currentCategory && (
|
||||
<div className="ml-auto flex items-center gap-2 text-neutral-400 text-xs">
|
||||
<span className="uppercase tracking-wide text-[10px]">Viewing</span>
|
||||
<span className="font-medium text-neutral-100">
|
||||
{CATEGORIES.find((c) => c.id === currentCategory)?.name ??
|
||||
currentCategory}
|
||||
</span>
|
||||
<Link
|
||||
href={baseHref}
|
||||
className="rounded border border-neutral-700 px-2 py-0.5 text-[10px] uppercase tracking-wide hover:bg-neutral-800 hover:text-white"
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* RIGHT SIDE: actions + state */}
|
||||
{/* IMPORTANT: this is the ONLY `ml-auto` in the nav to avoid conflicts */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
{/* Search icon (placeholder action) */}
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
|
||||
aria-label="Search (coming soon)"
|
||||
title="Search (coming soon)"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
>
|
||||
Clear
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<circle cx="11" cy="11" r="6" />
|
||||
<line x1="16.5" y1="16.5" x2="21" y2="21" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* "Viewing" indicator (only shows when a category is active) */}
|
||||
{currentCategory && (
|
||||
<div className="flex items-center gap-2 text-neutral-400 text-xs">
|
||||
<span className="uppercase tracking-wide text-[10px]">Viewing</span>
|
||||
|
||||
<span className="font-medium text-neutral-100">
|
||||
{CATEGORIES.find((c) => c.id === currentCategory)?.name ??
|
||||
currentCategory}
|
||||
</span>
|
||||
|
||||
{/* Clears category filter -> go back to /parts */}
|
||||
<Link
|
||||
href={baseHref}
|
||||
className="rounded border border-neutral-700 px-2 py-0.5 text-[10px] uppercase tracking-wide hover:bg-neutral-800 hover:text-white"
|
||||
>
|
||||
Clear
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* FUTURE: drop in ThemeToggle, UserMenu, Notifications here */}
|
||||
{/* <ThemeToggle /> */}
|
||||
{/* <UserMenu /> */}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Sun, Moon } from "lucide-react";
|
||||
|
||||
type Theme = "light" | "dark";
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const [theme, setTheme] = useState<Theme>("dark");
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const stored = (localStorage.getItem("theme") as Theme | null) ?? "dark";
|
||||
setTheme(stored);
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null; // prevents hydration mismatch
|
||||
|
||||
function toggle() {
|
||||
const next: Theme = theme === "dark" ? "light" : "dark";
|
||||
setTheme(next);
|
||||
localStorage.setItem("theme", next);
|
||||
document.documentElement.classList.toggle("dark", next === "dark");
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
aria-label="Toggle theme"
|
||||
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-semibold text-zinc-200 hover:bg-zinc-800 transition-colors
|
||||
dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-200
|
||||
border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<>
|
||||
<Sun className="h-4 w-4" />
|
||||
Light
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Moon className="h-4 w-4" />
|
||||
Dark
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
+15
-13
@@ -5,6 +5,7 @@ import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import ThemeToggle from "@/components/ThemeToggle";
|
||||
|
||||
export function TopNav() {
|
||||
const { user, logout, loading } = useAuth();
|
||||
@@ -12,8 +13,7 @@ export function TopNav() {
|
||||
const isAuthenticated = !!user;
|
||||
|
||||
return (
|
||||
<header className="border-b border-zinc-800 bg-black/95 backdrop-blur">
|
||||
|
||||
<header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
|
||||
{/* Main nav row */}
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
|
||||
{/* Left: Brand / Home */}
|
||||
@@ -21,20 +21,19 @@ export function TopNav() {
|
||||
href="/"
|
||||
className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
|
||||
>
|
||||
|
||||
<Image
|
||||
src="/battl/battl-logo-mark-2.svg"
|
||||
alt="Battl Builders Logo"
|
||||
width={260} // adjust to taste
|
||||
height={48} // adjust to taste
|
||||
className="block"
|
||||
/>
|
||||
<Image
|
||||
src="/battl/battl-logo-mark-2.svg"
|
||||
alt="Battl Builders Logo"
|
||||
width={260} // adjust to taste
|
||||
height={48} // adjust to taste
|
||||
className="block"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Right side actions */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Search placeholder */}
|
||||
<button
|
||||
{/* <button
|
||||
type="button"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
|
||||
aria-label="Search (coming soon)"
|
||||
@@ -52,7 +51,7 @@ export function TopNav() {
|
||||
<circle cx="11" cy="11" r="6" />
|
||||
<line x1="16.5" y1="16.5" x2="21" y2="21" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
|
||||
{loading ? (
|
||||
<span className="text-xs text-zinc-500">Checking session…</span>
|
||||
@@ -83,10 +82,13 @@ export function TopNav() {
|
||||
>
|
||||
Join Beta
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
/**
|
||||
* PartsBrowseClient
|
||||
* -----------------------------------------------------------------------------
|
||||
@@ -88,6 +90,7 @@ export default function PartsBrowseClient(props: {
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const pathname = usePathname();
|
||||
|
||||
const effectivePlatform =
|
||||
props.platform ?? searchParams.get("platform") ?? "AR-15";
|
||||
@@ -169,6 +172,11 @@ export default function PartsBrowseClient(props: {
|
||||
inStockOnly,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
// Reset scroll position whenever we land on or change parts routes
|
||||
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
|
||||
}, [pathname]);
|
||||
|
||||
const availableBrands = useMemo(
|
||||
() =>
|
||||
Array.from(new Set(parts.map((p) => p.brand)))
|
||||
|
||||
@@ -19,7 +19,6 @@ export default function PartsGrid(props: {
|
||||
parts: UiPart[];
|
||||
buildDetailHref: (p: UiPart) => string;
|
||||
|
||||
// NEW: optional Add-to-Build behavior
|
||||
onAddToBuild?: (p: UiPart) => void;
|
||||
addLabel?: string;
|
||||
}) {
|
||||
@@ -32,14 +31,15 @@ export default function PartsGrid(props: {
|
||||
{parts.map((part) => (
|
||||
<div
|
||||
key={part.id}
|
||||
className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all duration-200 hover:border-amber-400/60 hover:bg-amber-400/10"
|
||||
className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
|
||||
>
|
||||
<div className="mb-3 flex items-center gap-2 justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-semibold text-zinc-50 truncate">
|
||||
<div className="mb-3 flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-zinc-50">
|
||||
{part.brand} <span className="font-normal">— {part.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="whitespace-nowrap text-sm font-semibold text-amber-300">
|
||||
${part.price.toFixed(2)}
|
||||
</div>
|
||||
@@ -48,17 +48,16 @@ export default function PartsGrid(props: {
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Link
|
||||
href={buildDetailHref(part)}
|
||||
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
|
||||
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
|
||||
{/* NEW: Add to Build (preferred primary action if provided) */}
|
||||
{onAddToBuild ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAddToBuild(part)}
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
{addLabel}
|
||||
</button>
|
||||
@@ -67,7 +66,7 @@ export default function PartsGrid(props: {
|
||||
href={part.buyUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
Buy
|
||||
</a>
|
||||
@@ -80,7 +79,6 @@ export default function PartsGrid(props: {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -90,38 +88,43 @@ export default function PartsGrid(props: {
|
||||
// LIST view
|
||||
return (
|
||||
<>
|
||||
<div className="hidden grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 md:grid">
|
||||
<span>Part</span>
|
||||
<span>Brand</span>
|
||||
{/* Header (DESKTOP ONLY) */}
|
||||
<div className="hidden md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500"> <span className="min-w-0">Part</span>
|
||||
<span className="min-w-0">Brand</span>
|
||||
<span className="text-right">Price</span>
|
||||
<span className="pr-2 text-right">Actions</span>
|
||||
<span className="text-right">Actions</span>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
<div className="space-y-2">
|
||||
{parts.map((part) => (
|
||||
<div
|
||||
key={part.id}
|
||||
className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all duration-200 hover:border-amber-400/60 hover:bg-amber-400/10"
|
||||
className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
|
||||
>
|
||||
<div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-center md:gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-semibold text-zinc-50 truncate">
|
||||
<div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4">
|
||||
{/* Part */}
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-zinc-50">
|
||||
{part.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-zinc-400 md:text-left md:text-sm">
|
||||
{/* Brand */}
|
||||
<div className="min-w-0 text-xs text-zinc-400 md:text-sm">
|
||||
{part.brand}
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="text-sm font-semibold text-amber-300 md:text-right">
|
||||
${part.price.toFixed(2)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Link
|
||||
href={buildDetailHref(part)}
|
||||
className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
|
||||
className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
@@ -130,7 +133,7 @@ export default function PartsGrid(props: {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAddToBuild(part)}
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
{addLabel}
|
||||
</button>
|
||||
@@ -139,7 +142,7 @@ export default function PartsGrid(props: {
|
||||
href={part.buyUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
|
||||
className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
|
||||
>
|
||||
Buy
|
||||
</a>
|
||||
@@ -153,7 +156,6 @@ export default function PartsGrid(props: {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user