87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
|
import { Box, Link, Theme } from '@mui/material'
|
||
|
|
import { makeStyles } from '@mui/styles'
|
||
|
|
import { useCallback } from 'react';
|
||
|
|
import { useGlobalState } from '../state/GlobalState';
|
||
|
|
import { HeaderForm } from './HeaderForm';
|
||
|
|
|
||
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
||
|
|
headerContainer: {
|
||
|
|
display: 'flex',
|
||
|
|
flex: '0 1 3vh',
|
||
|
|
flexDirection: 'row',
|
||
|
|
backgroundColor: theme.palette.background.paper,
|
||
|
|
alignItems: 'center',
|
||
|
|
padding: '0 10vw 0 10vw',
|
||
|
|
},
|
||
|
|
linksContainer: {
|
||
|
|
display: 'flex',
|
||
|
|
flexGrow: 2,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
height: '100%',
|
||
|
|
},
|
||
|
|
formContainer: {
|
||
|
|
display: 'flex',
|
||
|
|
flexGrow: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
height: '100%',
|
||
|
|
},
|
||
|
|
link: {
|
||
|
|
display: 'flex',
|
||
|
|
padding: '0 1vw 0 1vw',
|
||
|
|
height: '100%',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderBottom: `1px solid transparent`,
|
||
|
|
'&:hover': {
|
||
|
|
borderBottom: `1px solid ${theme.palette.action.hover}`,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}))
|
||
|
|
|
||
|
|
export const Header = () => {
|
||
|
|
const classes = useStyles()
|
||
|
|
const websiteLink = useGlobalState(useCallback((state) => state.sptarkovWebsiteUrl,[]))
|
||
|
|
const workshopLink = useGlobalState(useCallback((state) => state.sptarkovWorkshopUrl,[]))
|
||
|
|
const documentationLink = useGlobalState(useCallback((state) => state.sptarkovDocumentationUrl,[]))
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Box className={classes.headerContainer}>
|
||
|
|
<Box className={classes.linksContainer}>
|
||
|
|
<Link
|
||
|
|
underline="hover"
|
||
|
|
color="inherit"
|
||
|
|
id="website-link"
|
||
|
|
href={websiteLink}
|
||
|
|
className={classes.link}
|
||
|
|
>
|
||
|
|
Website
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
underline="hover"
|
||
|
|
color="inherit"
|
||
|
|
id="workshop-link"
|
||
|
|
href={workshopLink}
|
||
|
|
className={classes.link}
|
||
|
|
>
|
||
|
|
Workshop
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
underline="hover"
|
||
|
|
color="inherit"
|
||
|
|
id="documentation-link"
|
||
|
|
href={documentationLink}
|
||
|
|
className={classes.link}
|
||
|
|
>
|
||
|
|
Documentation
|
||
|
|
</Link>
|
||
|
|
</Box>
|
||
|
|
<Box className={classes.formContainer}>
|
||
|
|
<HeaderForm/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|