Create page depency components

src/Footer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Footer() {
+	return (
+		<footer>
+			&copy; Matthew Grove {new Date().getFullYear()}
+		</footer>
+	)
+}

src/NavBar.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+import BannerLogo from "./images/banner.png";
+import SmallLogo from "./images/logo.png";
+import "./css/NavBar.css";
+import Button from "./Button";
+import LinkButton from "./LinkButton";
+
+export default function Navbar(props) {
+	const navbarItems = props.items;
+	return (
+		<nav>
+			<Link to="/">
+				<img className="navbar-logo" id="banner-logo" src={BannerLogo} alt="Parandum Logo" />
+				<img className="navbar-logo" id="small-logo" src={SmallLogo} alt="Parandum Logo" />
+			</Link>
+
+			{ navbarItems ?
+				<div className="navbar-items">
+					{navbarItems.map((item, index) => {
+						if (item.type === "link") {
+							return <LinkButton className={`${item.hideTextMobile ? "button--hide-text-mobile" : ""} ${item.icon && !item.name ? "button--round" : ""}`} key={index} to={item.link} icon={item.icon}>{item.name}</LinkButton>
+						} else if (item.type === "button") {
+							return <Button className={`${item.hideTextMobile ? "button--hide-text-mobile" : ""} ${item.icon && !item.name ? "button--round" : ""}`} key={index} onClick={item.onClick} icon={item.icon}>{item.name}</Button>
+						}
+						return false;
+					})}
+				</div>
+				:
+				""
+			}
+		</nav>
+	)
+}

src/SettingsContent.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import { CheckRounded as CheckRoundedIcon } from "@material-ui/icons";
+import Button from "./Button";
+
+import "./css/SettingsContent.css";
+
+export default class SettingsContent extends Component {
+	render() {
+		return (
+			<>
+				<h1 className="settings-header">Settings</h1>
+				<label className="settings-sound-container">
+					<Checkbox
+						checked={this.props.soundInput}
+						onChange={this.props.handleSoundInputChange}
+						inputProps={{ 'aria-label': 'checkbox' }}
+					/>
+					<span>Sound</span>
+				</label>
+
+				<h2 className="settings-theme-header">Theme</h2>
+				<div className="settings-themes-container">
+					{
+						this.props.themes.map((theme) =>
+							<Button
+								onClick={() => this.props.handleThemeInputChange(theme)}
+								icon={this.props.themeInput === theme && <CheckRoundedIcon />}
+								className={`background--${theme}`}
+								key={theme}
+							>
+								{
+									theme.split("-")
+										.map((word) =>
+											word[0].toUpperCase() + word.substring(1)
+										).join(" ")
+								}
+							</Button>
+						)
+					}
+				</div>
+			</>
+		)
+	}
+}