diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/footer.tsx | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/components/footer.tsx b/components/footer.tsx new file mode 100644 index 0000000..2d84a1c --- /dev/null +++ b/components/footer.tsx @@ -0,0 +1,49 @@ +import { LogoDark } from "../components/logo"; +import { ReactNode } from 'react'; + +import Home from '@material-ui/icons/Home'; +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; +import ExtensionIcon from '@material-ui/icons/Extension'; +import SearchIcon from '@material-ui/icons/Search'; +import SettingsIcon from '@material-ui/icons/Settings'; +import PersonIcon from '@material-ui/icons/Person'; +import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined'; +import LockIcon from '@material-ui/icons/Lock'; +import GitHubIcon from '@material-ui/icons/GitHub'; + +function PageLink(props: { + icon: ReactNode; + href: string; + children: string; +}) { + return <a href={props.href} className="pageLink"> + {props.icon} + <span>{props.children}</span> + </a> +} + +export function Footer() { + return <div className="footer"> + <div className="header"> + <LogoDark/> + <h2>4 op een rij</h2> + </div> + <div className="content"> + <div className="column"> + <PageLink icon={<Home/>} href="/" children="Home"/> + <PageLink icon={<VideogameAssetIcon/>} href="/game" children="Spelen"/> + <PageLink icon={<ExtensionIcon/>} href="/" children="Puzzels"/> + <PageLink icon={<SearchIcon/>} href="/search" children="Zoeken"/> + </div> + <div className="column"> + <PageLink icon={<LockIcon/>} href="/privacy" children="Privacy"/> + <PageLink icon={<GitHubIcon/>} href="https://github.com/lonkaars/connect-4" children="Broncode"/> + </div> + <div className="column"> + <PageLink icon={<SettingsIcon/>} href="/settings" children="Instellingen"/> + <PageLink icon={<PersonIcon/>} href="/user" children="Profiel"/> + <PageLink icon={<ExitToAppOutlinedIcon/>} href="/logout" children="Uitloggen"/> + </div> + </div> + </div> +} |