34 lines
957 B
TypeScript
34 lines
957 B
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);
|
|
return (
|
|
<AppBar position='sticky'>
|
|
<Container maxWidth={containerMaxWidth} className='header-container'>
|
|
<Toolbar className='header-container'>
|
|
<Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
|
|
<img src='/badge-white.png' className='header-icon'></img>
|
|
</Link>
|
|
<Typography variant='h6'>{title}</Typography>
|
|
{title === '' && <Skeleton height={20} width={200}></Skeleton>}
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
);
|
|
}
|