footer in code +/ css samples

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;
+}