23 lines
684 B
TypeScript
23 lines
684 B
TypeScript
 
|
import { useNavigate } from "react-router";
|
||
|
|
import { SCREEN_LABELS, type Screen } from "../auth/roles";
|
||
|
|
|
||
|
|
interface RoleSwitcherProps {
|
||
|
|
screens: readonly Screen[];
|
||
|
|
active: Screen | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** One button per screen the user has. Drawn only when there is more than one. */
|
||
|
|
export function RoleSwitcher({ screens, active }: RoleSwitcherProps) {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
if (screens.length < 2) return null;
|
||
|
|
return (
|
||
|
|
<nav className="roles" aria-label="Screens">
|
||
|
|
{screens.map((s) => (
|
||
|
|
<button key={s} type="button" aria-pressed={active === s} onClick={() => navigate(`/${s}`)}>
|
||
|
|
{SCREEN_LABELS[s]}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|