005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Box, IconButton } from '@mui/joy';
|
|
import Typography from '@mui/joy/Typography';
|
|
import Avatar from '@mui/joy/Avatar';
|
|
import MapsHomeWorkIcon from '@mui/icons-material/MapsHomeWork';
|
|
import ColorSchemeToggle from './ColorSchemeToggle';
|
|
|
|
export default function HeaderSection() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
top: 0,
|
|
px: 1.5,
|
|
py: 1,
|
|
zIndex: 10000,
|
|
backgroundColor: 'background.body',
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
position: 'sticky',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 1.5,
|
|
}}
|
|
>
|
|
<IconButton size="sm" variant="soft">
|
|
<MapsHomeWorkIcon />
|
|
</IconButton>
|
|
<Typography component="h1" sx={{ fontWeight: 'xl' }}>
|
|
Acme Rental
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
|
|
<Box
|
|
sx={{ gap: 1, alignItems: 'center', display: { xs: 'none', sm: 'flex' } }}
|
|
>
|
|
<Avatar
|
|
variant="outlined"
|
|
size="sm"
|
|
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
|
|
/>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography level="title-sm">Siriwat K.</Typography>
|
|
<Typography level="body-xs">siriwatk@test.com</Typography>
|
|
</Box>
|
|
</Box>
|
|
<ColorSchemeToggle sx={{ alignSelf: 'center' }} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|