30 lines
990 B
TypeScript
30 lines
990 B
TypeScript
import React, { type ReactElement } from 'react';
|
|
import { Box, Tab, Tabs } from '@mui/material';
|
|
import { useLocation, useNavigate } from 'react-router';
|
|
|
|
const ValidTabs = ['home', 'career', 'about'] as const satisfies string[];
|
|
|
|
export function TopBar(): ReactElement {
|
|
const { pathname } = useLocation();
|
|
const navigate = useNavigate();
|
|
const selectedTab =
|
|
ValidTabs.find((tabName) => pathname.toLowerCase().startsWith('/' + tabName)) ??
|
|
ValidTabs[0];
|
|
|
|
return (
|
|
<Box sx={{ width: '100%', marginBottom: '10px', boxShadow: '0 3px 5px -5px white' }}>
|
|
<Tabs
|
|
variant='fullWidth'
|
|
centered
|
|
sx={{ fontSize: 32 }}
|
|
value={selectedTab}
|
|
onChange={(_, value) => navigate('/' + value)}
|
|
>
|
|
{ValidTabs.map((tab) => (
|
|
<Tab key={tab} label={tab} value={tab} />
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
}
|