From 946bc5f6e65fad245cb62af709bd9ff6ad7170db Mon Sep 17 00:00:00 2001
From: Guus van Meerveld <mail@guusvanmeerveld.dev>
Date: Sat, 9 Mar 2024 17:24:56 +0100
Subject: [PATCH] started work on page footer

---
 data/landing.json                  | 23 ++++++++++---------
 src/app/(landing)/Header.tsx       | 24 +++++++++----------
 src/app/(landing)/page.tsx         |  4 +++-
 src/app/Footer.tsx                 | 12 ++++++++++
 src/app/ThemeSwitcher.tsx          | 37 ++++++++++++++++++++++++++++++
 src/app/error.tsx                  | 14 ++++++-----
 src/app/layout.tsx                 |  3 ++-
 src/app/providers.tsx              | 14 ++++++++---
 src/models/footer.ts               |  7 ++++++
 src/models/{owner.ts => header.ts} |  6 ++---
 src/models/landing.ts              |  6 +++--
 src/styles/global.scss             | 20 ----------------
 src/typings/component.ts           |  2 +-
 src/utils/constants.ts             |  2 --
 14 files changed, 112 insertions(+), 62 deletions(-)
 create mode 100644 src/app/Footer.tsx
 create mode 100644 src/app/ThemeSwitcher.tsx
 create mode 100644 src/models/footer.ts
 rename src/models/{owner.ts => header.ts} (64%)

diff --git a/data/landing.json b/data/landing.json
index 1561195..ea1644d 100644
--- a/data/landing.json
+++ b/data/landing.json
@@ -1,12 +1,13 @@
 {
-    "owner": {
-        "fullName": "Guus van Meerveld",
-        "name": "guus",
-        "description": "AI student at Radboud University. Creating software as a hobby.",
-        "contact": {
-            "email": "contact@guusvanmeerveld.dev",
-            "git": "https://github.com/Guusvanmeerveld",
-            "linkedin": "https://linkedin.com/in/guus-van-meerveld-038357210"
-        }
-    }
-}
\ No newline at end of file
+	"header": {
+		"fullName": "Guus van Meerveld",
+		"name": "guus",
+		"description": "AI student at Radboud University. Creating software as a hobby.",
+		"contact": {
+			"email": "contact@guusvanmeerveld.dev",
+			"git": "https://github.com/Guusvanmeerveld",
+			"linkedin": "https://linkedin.com/in/guus-van-meerveld-038357210"
+		}
+	},
+	"footer": {}
+}
diff --git a/src/app/(landing)/Header.tsx b/src/app/(landing)/Header.tsx
index 8b8736e..7da1795 100644
--- a/src/app/(landing)/Header.tsx
+++ b/src/app/(landing)/Header.tsx
@@ -10,45 +10,45 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { FiGithub, FiMail, FiLinkedin } from "react-icons/fi";
 
-import Owner from "@models/owner";
+import HeaderProps from "@models/header";
 
-export const Header: Component<{ owner: Owner }> = ({ owner }) => {
+export const Header: Component<{ header: HeaderProps }> = ({ header }) => {
 	const socials = useMemo(
 		() => [
 			{
-				link: `mailto:${owner.contact.email}`,
+				link: `mailto:${header.contact.email}`,
 				name: "Email address",
 				icon: <FiMail />
 			},
 			{
-				link: owner.contact.git,
+				link: header.contact.git,
 				name: "Github",
 				icon: <FiGithub />
 			},
 			{
-				link: owner.contact.linkedin,
+				link: header.contact.linkedin,
 				name: "LinkedIn",
 				icon: <FiLinkedin />
 			}
 		],
-		[owner.contact]
+		[header.contact]
 	);
 
 	return (
-		<div className="container min-h-screen">
+		<div className="container mx-auto flex items-center min-h-screen">
 			<div>
-				{owner.avatar !== undefined && (
+				{header.avatar !== undefined && (
 					<Image
-						src={owner.avatar}
+						src={header.avatar}
 						width={300}
-						alt={`A picture of ${owner.fullName}`}
+						alt={`A picture of ${header.fullName}`}
 					/>
 				)}
 
-				<h1 className="text-4xl">{owner.fullName}</h1>
+				<h1 className="text-4xl">{header.fullName}</h1>
 				<Spacer y={4} />
 
-				<h2 className="text-2xl">{owner.description}</h2>
+				<h2 className="text-2xl">{header.description}</h2>
 				<Spacer y={4} />
 
 				{socials.map((social) => (
diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx
index 5633c0e..167ed91 100644
--- a/src/app/(landing)/page.tsx
+++ b/src/app/(landing)/page.tsx
@@ -1,3 +1,4 @@
+import { Footer } from "../Footer";
 import { Header } from "./Header";
 
 import Landing from "@models/landing";
@@ -15,7 +16,8 @@ export default async function Page() {
 
 	return (
 		<>
-			<Header owner={landing.owner} />
+			<Header header={landing.header} />
+			<Footer />
 		</>
 	);
 }
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
new file mode 100644
index 0000000..5a96225
--- /dev/null
+++ b/src/app/Footer.tsx
@@ -0,0 +1,12 @@
+import { Component } from "@typings/component";
+
+export const Footer: Component = () => {
+	return (
+		<div className="container mx-auto columns-4">
+			<div className="w-full">hi</div>
+			<div className="w-full">hi</div>
+			<div className="w-full">hi</div>
+			<div className="w-full">hi</div>
+		</div>
+	);
+};
diff --git a/src/app/ThemeSwitcher.tsx b/src/app/ThemeSwitcher.tsx
new file mode 100644
index 0000000..e213fd5
--- /dev/null
+++ b/src/app/ThemeSwitcher.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Switch } from "@nextui-org/react";
+import { Component } from "@typings/component";
+import { useTheme } from "next-themes";
+
+import { useEffect, useState } from "react";
+import { FiMoon, FiSun } from "react-icons/fi";
+
+export const ThemeSwitcher: Component = () => {
+	const [mounted, setMounted] = useState(false);
+	const { theme, setTheme } = useTheme();
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) return null;
+
+	return (
+		<div>
+			The current theme is: {theme}
+			<Switch
+				defaultSelected
+				size="lg"
+				color="primary"
+				onValueChange={(value) => {
+					value ? setTheme("dark") : setTheme("light");
+				}}
+				startContent={<FiSun />}
+				endContent={<FiMoon />}
+			>
+				Dark mode
+			</Switch>
+		</div>
+	);
+};
diff --git a/src/app/error.tsx b/src/app/error.tsx
index bf16918..46af61b 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -11,13 +11,15 @@ const MainErrorPage: ErrorPage = ({ error, reset }) => {
 	}, [error]);
 
 	return (
-		<div className="container min-h-screen text-center">
-			<p className="text-3xl">Something went loading the page!</p>
-			<p className="text-xl">{error.toString()}</p>
+		<div className="container mx-auto flex items-center justify-center min-h-screen text-center">
 			<div>
-				<Link href="#" onClick={() => reset()}>
-					Try again
-				</Link>
+				<p className="text-3xl">Something went loading the page!</p>
+				<p className="text-xl">{error.toString()}</p>
+				<div>
+					<Link href="#" onClick={() => reset()}>
+						Try again
+					</Link>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9adb8b3..d3324eb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 
+import { Footer } from "./Footer";
 import { Providers } from "./providers";
 
 import "@styles/global.scss";
@@ -10,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<html lang="en" className="dark">
+		<html lang="en">
 			<body>
 				<Providers>{children}</Providers>
 			</body>
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 279d01e..67f9ab1 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,7 +1,15 @@
 "use client";
 
 import { NextUIProvider } from "@nextui-org/react";
+import { Component } from "@typings/component";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
-export function Providers({ children }: { children: React.ReactNode }) {
-	return <NextUIProvider>{children}</NextUIProvider>;
-}
+export const Providers: Component = ({ children }) => {
+	return (
+		<NextUIProvider>
+			<NextThemesProvider attribute="class" defaultTheme="dark">
+				{children}
+			</NextThemesProvider>
+		</NextUIProvider>
+	);
+};
diff --git a/src/models/footer.ts b/src/models/footer.ts
new file mode 100644
index 0000000..d38b3f5
--- /dev/null
+++ b/src/models/footer.ts
@@ -0,0 +1,7 @@
+import z from "zod";
+
+export const FooterPropsModel = z.object({});
+
+export type FooterProps = z.infer<typeof FooterPropsModel>;
+
+export default FooterProps;
diff --git a/src/models/owner.ts b/src/models/header.ts
similarity index 64%
rename from src/models/owner.ts
rename to src/models/header.ts
index 218e263..43cc38f 100644
--- a/src/models/owner.ts
+++ b/src/models/header.ts
@@ -1,6 +1,6 @@
 import z from "zod";
 
-export const OwnerModel = z.object({
+export const HeaderPropsModel = z.object({
 	fullName: z.string(),
 	name: z.string(),
 	avatar: z.string().optional(),
@@ -12,6 +12,6 @@ export const OwnerModel = z.object({
 	})
 });
 
-export type Owner = z.infer<typeof OwnerModel>;
+export type HeaderProps = z.infer<typeof HeaderPropsModel>;
 
-export default Owner;
+export default HeaderProps;
diff --git a/src/models/landing.ts b/src/models/landing.ts
index 26a5af7..cc13e05 100644
--- a/src/models/landing.ts
+++ b/src/models/landing.ts
@@ -1,9 +1,11 @@
 import z from "zod";
 
-import { OwnerModel } from "./owner";
+import { FooterPropsModel } from "./footer";
+import { HeaderPropsModel } from "./header";
 
 export const LandingModel = z.object({
-	owner: OwnerModel
+	header: HeaderPropsModel,
+	footer: FooterPropsModel
 });
 
 export type Landing = z.infer<typeof LandingModel>;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 919fb77..b5c61c9 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,23 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.container {
-	display: flex;
-	min-width: 100%;
-	flex-direction: column;
-	justify-content: center;
-
-	padding-right: 1rem;
-	padding-left: 1rem;
-
-	@media screen and (width >=800px) {
-		padding-right: 4rem;
-		padding-left: 4rem;
-	}
-
-	@media screen and (width >=1200px) {
-		padding-right: 16rem;
-		padding-left: 16rem;
-	}
-}
diff --git a/src/typings/component.ts b/src/typings/component.ts
index 3f353b4..0764147 100644
--- a/src/typings/component.ts
+++ b/src/typings/component.ts
@@ -1,3 +1,3 @@
 import { FC, PropsWithChildren } from "react";
 
-export type Component<P> = FC<PropsWithChildren<P>>;
+export type Component<P = unknown> = FC<PropsWithChildren<P>>;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index decb3e2..b02c323 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,3 +1 @@
-import path from "path";
-
 export const dataDirLocation = process.env.DATA_DIR ?? "/app/data";