32 lines
933 B
TypeScript
32 lines
933 B
TypeScript
import { NavLink } from "react-router";
|
|
import { useLoadedPlayer } from "../state/actions";
|
|
|
|
/** Fleet's two views, Ships and Crew (decision 0.5.167). */
|
|
export function FleetViews() {
|
|
const state = useLoadedPlayer();
|
|
const views = [
|
|
{ to: "/fleet", label: `Ships ${state.ships.length}` },
|
|
{ to: "/pilots", label: `Crew ${state.pilots.length}` },
|
|
];
|
|
return (
|
|
<nav
|
|
aria-label="Fleet views"
|
|
className="flex gap-0.5 rounded-xl border border-glass-line bg-black/25 p-0.5"
|
|
>
|
|
{views.map((view) => (
|
|
<NavLink
|
|
key={view.to}
|
|
to={view.to}
|
|
className={({ isActive }) =>
|
|
`flex min-h-11 flex-1 items-center justify-center rounded-[0.6rem] text-sm font-medium ${
|
|
isActive ? "bg-white/14 text-ink-50" : "text-ink-300 hover:text-ink-50"
|
|
}`
|
|
}
|
|
>
|
|
{view.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|