mirror of
https://github.com/DorkSquadRR/DorkNet.git
synced 2026-10-25 23:18:44 -07:00
Alexa
4edf25b2d5
Targets Rec Room 2020.12.18 client.
Re-import after adding:
- DorkNet.ClientMod/dorknet-clientmod.json.template — config schema
the launcher's manifest-driven patcher renders into UserData/.
- tools/build-patcher-zip.ps1 — produces the dorknet-clientpatch-{key}.zip
Release asset the launcher fetches.
- .github/workflows/release.yml — auto-publishes both Release assets
on v1-december-* tag push.
Scrubbed via maintainer-side scrub-for-public.ps1: same drop rules as
the prior import, plus build-patcher-zip.ps1 added to the tools/
allow-list so it survives the scrub.
104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
import { NavLink, Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
const NAV = [
|
|
{ to: '/', label: 'Home', exact: true },
|
|
{ to: '/feed', label: 'Feed' },
|
|
{ to: '/players', label: 'Players' },
|
|
{ to: '/rooms', label: 'Rooms' },
|
|
];
|
|
|
|
export function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
const [q, setQ] = useState('');
|
|
const nav = useNavigate();
|
|
const loc = useLocation();
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Close the mobile drawer on route change so tapping a nav item
|
|
// doesn't leave a half-open overlay covering the page.
|
|
useEffect(() => { setOpen(false); }, [loc.pathname]);
|
|
|
|
const submitSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const v = q.trim();
|
|
if (v) nav(`/players?q=${encodeURIComponent(v)}`);
|
|
};
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-ink-800 bg-ink-950/85 backdrop-blur">
|
|
<div className="mx-auto max-w-6xl flex items-center gap-4 px-4 sm:px-6 py-3">
|
|
<Link to="/" className="flex items-center gap-2 shrink-0">
|
|
<span className="inline-block size-6 rounded-md bg-gradient-to-br from-brand-400 to-brand-700 shadow-inner" />
|
|
<span className="font-semibold text-ink-50 tracking-tight">DorkNet</span>
|
|
</Link>
|
|
|
|
<nav className="hidden md:flex items-center gap-1 ml-2">
|
|
{NAV.map(n => (
|
|
<NavLink
|
|
key={n.to}
|
|
to={n.to}
|
|
end={n.exact}
|
|
className={({ isActive }) =>
|
|
`px-3 py-1.5 rounded-md text-sm transition-colors ${
|
|
isActive ? 'bg-ink-800 text-ink-50' : 'text-ink-300 hover:bg-ink-800/60 hover:text-ink-100'
|
|
}`
|
|
}
|
|
>
|
|
{n.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<form onSubmit={submitSearch} className="ml-auto hidden sm:flex flex-1 max-w-xs">
|
|
<input
|
|
ref={inputRef}
|
|
value={q}
|
|
onChange={e => setQ(e.target.value)}
|
|
placeholder="Search players…"
|
|
className="input"
|
|
/>
|
|
</form>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(o => !o)}
|
|
aria-label="Toggle menu"
|
|
className="md:hidden btn-ghost text-sm ml-auto"
|
|
>
|
|
{open ? 'Close' : 'Menu'}
|
|
</button>
|
|
</div>
|
|
|
|
{open && (
|
|
<div className="md:hidden border-t border-ink-800 bg-ink-900">
|
|
<div className="mx-auto max-w-6xl px-4 sm:px-6 py-3 flex flex-col gap-2">
|
|
<form onSubmit={submitSearch} className="flex">
|
|
<input
|
|
value={q}
|
|
onChange={e => setQ(e.target.value)}
|
|
placeholder="Search players…"
|
|
className="input"
|
|
/>
|
|
</form>
|
|
<nav className="flex flex-col gap-1">
|
|
{NAV.map(n => (
|
|
<NavLink
|
|
key={n.to}
|
|
to={n.to}
|
|
end={n.exact}
|
|
className={({ isActive }) =>
|
|
`px-3 py-2 rounded-md text-sm ${isActive ? 'bg-ink-800 text-ink-50' : 'text-ink-200 hover:bg-ink-800/60'}`
|
|
}
|
|
>
|
|
{n.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|