diff options
| -rw-r--r-- | components/footer.tsx | 49 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/index.tsx | 2 | ||||
| -rw-r--r-- | pages/settings.tsx | 3 | ||||
| -rw-r--r-- | pages/user.tsx | 2 | ||||
| -rw-r--r-- | styles/footer.css | 35 |
6 files changed, 91 insertions, 1 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> +} diff --git a/pages/_app.tsx b/pages/_app.tsx index a95caa4..fad7c33 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,7 @@ import { SocketContextWrapper } from '../components/socketContext'; import '../styles/global.css'; import '../styles/dark.css'; import '../styles/disk.css'; +import '../styles/footer.css'; export default function VierOpEenRijWebsite({ Component, pageProps }) { return <div> diff --git a/pages/index.tsx b/pages/index.tsx index dfb14e6..9bfe2a7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,6 +2,7 @@ import { CSSProperties, useState, useEffect, useContext } from 'react'; import axios from 'axios'; import { userInfo, userGameTotals, userGames } from '../api/api'; import { SocketContext } from '../components/socketContext'; +import { Footer } from '../components/footer'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; @@ -194,6 +195,7 @@ export default function HomePage() { <p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p> </Vierkant> </CenteredPage> + <Footer/> </div> } diff --git a/pages/settings.tsx b/pages/settings.tsx index 99a87d1..dcaa866 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,7 +1,6 @@ import { CSSProperties, useContext } from 'react'; import * as cookies from 'react-cookies'; import axios from 'axios'; -import pica from 'pica'; import reduce from 'image-blob-reduce'; import { NavBar } from '../components/navbar'; @@ -10,6 +9,7 @@ import { Vierkant, IconLabelButton, CheckBox, ColorPicker } from '../components/ import { AccountAvatar } from '../components/account'; import { CurrentGameSettings } from '../components/gameSettings'; import PreferencesContext from '../components/preferencesContext'; +import { Footer } from '../components/footer'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined'; @@ -143,6 +143,7 @@ export default function SettingsPage() { </div> </Vierkant> </CenteredPage> + <Footer/> </div> ); } diff --git a/pages/user.tsx b/pages/user.tsx index ce870af..5f5b1eb 100644 --- a/pages/user.tsx +++ b/pages/user.tsx @@ -10,6 +10,7 @@ import { userInfo, userGames } from '../api/api'; import RecentGames from '../components/recentGames'; import { ToastContext } from '../components/toast'; import { SocketContext } from '../components/socketContext'; +import { Footer } from '../components/footer'; import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined'; import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined'; @@ -320,6 +321,7 @@ export default function AccountPage() { <RecentGames games={gameInfo?.games}/> </Vierkant> </CenteredPage> + <Footer/> </div> } diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 0000000..4760d56 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,35 @@ +.footer { + margin-top: 24px; + padding: 24px 48px; + color: var(--text); +} + +.footer .header * { + display: inline-block; + vertical-align: top; +} + +.footer .header h2 { + margin-left: 6px; +} + +.footer .header rect { + fill: var(--page-background); +} + +.footer .content { + display: grid; + grid-auto-flow: column; + grid-gap: 24px; + margin-top: 12px; +} + +.footer .content .pageLink span { + margin-left: 6px; + vertical-align: super; +} + +.footer .content .pageLink { + margin-top: 12px; + display: block; +} |