You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { A, type RouteSectionProps } from '@solidjs/router'
|
|
import type { Component } from 'solid-js'
|
|
|
|
import AppBar from '@suid/material/AppBar'
|
|
import Box from '@suid/material/Box'
|
|
import Container from '@suid/material/Container'
|
|
import IconButton from '@suid/material/IconButton'
|
|
import Stack from '@suid/material/Stack'
|
|
import Toolbar from '@suid/material/Toolbar'
|
|
import Typography from '@suid/material/Typography'
|
|
|
|
import HomeIcon from '@suid/icons-material/Home'
|
|
import SportsEsportsIcon from '@suid/icons-material/SportsEsports'
|
|
import LeaderboardIcon from '@suid/icons-material/Leaderboard'
|
|
import PersonIcon from '@suid/icons-material/Person'
|
|
|
|
const AppShell: Component<RouteSectionProps> = (props) => {
|
|
return (
|
|
<Box sx={{ minHeight: '100vh', bgcolor: '#0b0e14', color: '#e6e6e6' }}>
|
|
<AppBar position="static" color="transparent" elevation={0}>
|
|
<Toolbar>
|
|
<Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 700 }}>
|
|
Know Foolery
|
|
</Typography>
|
|
|
|
<Stack direction="row" spacing={1}>
|
|
<IconButton component={A} href="/" aria-label="Home" color="inherit">
|
|
<HomeIcon />
|
|
</IconButton>
|
|
<IconButton component={A} href="/game" aria-label="Game" color="inherit">
|
|
<SportsEsportsIcon />
|
|
</IconButton>
|
|
<IconButton component={A} href="/leaderboard" aria-label="Leaderboard" color="inherit">
|
|
<LeaderboardIcon />
|
|
</IconButton>
|
|
<IconButton component={A} href="/profile" aria-label="Profile" color="inherit">
|
|
<PersonIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Container maxWidth="md" sx={{ py: 3 }}>
|
|
{props.children}
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default AppShell
|