60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import {
|
|
AppBar,
|
|
Toolbar,
|
|
Container,
|
|
Typography,
|
|
Skeleton,
|
|
} from '@mui/material';
|
|
import { useContext } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import '../css/Header.css';
|
|
import { Context } from '../data/Context';
|
|
|
|
/**
|
|
* Creates a Header Component that displays the reservation steps
|
|
* @return {JSX.Element}
|
|
*/
|
|
export default function Header() {
|
|
const { title, containerMaxWidth } = useContext(Context);
|
|
|
|
const logoContainerStyle = {
|
|
textDecoration: 'none',
|
|
color: 'inherit',
|
|
margin: '0 0 0 0',
|
|
width: 'fit-content',
|
|
padding: '0 0 0 0 !important',
|
|
};
|
|
|
|
return (
|
|
<AppBar position='sticky'>
|
|
<Container maxWidth={containerMaxWidth} className='header-container'>
|
|
<Toolbar className='header-container'>
|
|
<Container
|
|
sx={{
|
|
...logoContainerStyle,
|
|
display: { xs: 'none', md: 'block' },
|
|
}}
|
|
>
|
|
<Link to='/'>
|
|
<img src='/badge-white.png' className='header-icon'></img>
|
|
</Link>
|
|
</Container>
|
|
<Container
|
|
sx={{
|
|
...logoContainerStyle,
|
|
display: { xs: 'block', md: 'none' },
|
|
}}
|
|
>
|
|
<Link to='/'>
|
|
<img src='/logo192.png' className='header-icon'></img>
|
|
</Link>
|
|
</Container>
|
|
<Typography variant='h6'>{title}</Typography>
|
|
{title === '' && <Skeleton height={20} width={200}></Skeleton>}
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
);
|
|
}
|