created basic footer

data/landing.json

@@ -9,5 +9,21 @@
 			"linkedin": "https://linkedin.com/in/guus-van-meerveld-038357210"
 		}
 	},
-	"footer": {}
+	"footer": {
+		"columns": [
+			{
+				"title": "Built with",
+				"links": [
+					{ "url": "https://nextjs.org/", "text": "Next.js" },
+					{ "url": "https://nextui.org/", "text": "NextUI" }
+				]
+			},
+			{
+				"title": "Social",
+				"links": [
+					{ "url": "https://github.com/Guusvanmeerveld", "text": "Github" }
+				]
+			}
+		]
+	}
 }

src/app/(landing)/Header.tsx

@@ -12,29 +12,29 @@ import { FiGithub, FiMail, FiLinkedin } from "react-icons/fi";
 
 import HeaderProps from "@models/header";
 
-export const Header: Component<{ header: HeaderProps; avatar: string }> = ({
-	header,
+export const Header: Component<{ data: HeaderProps; avatar: string }> = ({
+	data,
 	avatar
 }) => {
 	const socials = useMemo(
 		() => [
 			{
-				link: `mailto:${header.contact.email}`,
+				link: `mailto:${data.contact.email}`,
 				name: "Email address",
 				icon: <FiMail />
 			},
 			{
-				link: header.contact.git,
+				link: data.contact.git,
 				name: "Github",
 				icon: <FiGithub />
 			},
 			{
-				link: header.contact.linkedin,
+				link: data.contact.linkedin,
 				name: "LinkedIn",
 				icon: <FiLinkedin />
 			}
 		],
-		[header.contact]
+		[data.contact]
 	);
 
 	return (
@@ -44,31 +44,35 @@ export const Header: Component<{ header: HeaderProps; avatar: string }> = ({
 					isBlurred
 					src={avatar}
 					width={300}
-					alt={`A picture of ${header.fullName}`}
+					alt={`A picture of ${data.fullName}`}
 				/>
 
 				<Spacer x={8} />
 
 				<div>
-					<h1 className="text-4xl">{header.fullName}</h1>
+					<h1 className="text-4xl">{data.fullName}</h1>
 					<Spacer y={4} />
 
-					<h2 className="text-2xl">{header.description}</h2>
+					<h2 className="text-2xl">{data.description}</h2>
 					<Spacer y={4} />
 
 					{socials.map((social) => (
-						<Link href={social.link} key={social.name.toLowerCase()}>
-							<Tooltip showArrow content={social.name}>
-								<Button
-									className="text-2xl mr-4"
-									color="primary"
-									isIconOnly
-									aria-label={social.name}
-								>
-									{social.icon}
-								</Button>
-							</Tooltip>
-						</Link>
+						<Tooltip
+							key={social.name.toLowerCase()}
+							showArrow
+							content={social.name}
+						>
+							<Button
+								href={social.link}
+								as={Link}
+								className="text-2xl mr-4"
+								color="primary"
+								isIconOnly
+								aria-label={social.name}
+							>
+								{social.icon}
+							</Button>
+						</Tooltip>
 					))}
 				</div>
 			</div>

src/app/(landing)/page.tsx

@@ -11,8 +11,8 @@ export default async function Page() {
 
 	return (
 		<>
-			<Header header={landing.header} avatar={avatar} />
-			<Footer />
+			<Header data={landing.header} avatar={avatar} />
+			<Footer data={landing.footer} />
 		</>
 	);
 }

src/app/Footer.tsx

@@ -1,12 +1,44 @@
+"use client";
+
+import { Divider, Link } from "@nextui-org/react";
 import { Component } from "@typings/component";
 
-export const Footer: Component = () => {
+import { ThemeSwitcher } from "./ThemeSwitcher";
+
+import FooterProps from "@models/footer";
+
+export const Footer: Component<{ data: FooterProps }> = ({ data }) => {
 	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 className="container mx-auto grid grid-flow-col justify-stretch my-4">
+			<div className="mx-4">
+				<h1 className="text-xl">
+					Created with{" "}
+					<span role="img" aria-label="Red Heart">
+						&#x2764;&#xfe0f;
+					</span>{" "}
+					by Guus van Meerveld
+				</h1>
+
+				<Divider className="my-4" />
+
+				<ThemeSwitcher />
+			</div>
+
+			{data.columns.map((column) => (
+				<div className="mx-4" key={column.title.toLowerCase()}>
+					<h1 className="text-xl">{column.title}</h1>
+
+					<Divider className="mt-4" />
+
+					{column.links.map((link) => (
+						<div className="my-4" key={link.url}>
+							<Link className="text-default-500" href={link.url}>
+								{link.text}
+							</Link>
+						</div>
+					))}
+				</div>
+			))}
 		</div>
 	);
 };

src/app/Nav.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import {
+	Button,
+	Link,
+	Navbar,
+	NavbarBrand,
+	NavbarContent,
+	NavbarItem
+} from "@nextui-org/react";
+import { Component } from "@typings/component";
+
+export const Nav: Component = () => {
+	return (
+		<Navbar position="sticky">
+			<NavbarBrand>
+				<p className="font-bold text-inherit">ACME</p>
+			</NavbarBrand>
+			<NavbarContent className="hidden sm:flex gap-4" justify="center">
+				<NavbarItem>
+					<Link color="foreground" href="#">
+						Features
+					</Link>
+				</NavbarItem>
+				<NavbarItem isActive>
+					<Link href="#" aria-current="page">
+						Customers
+					</Link>
+				</NavbarItem>
+				<NavbarItem>
+					<Link color="foreground" href="#">
+						Integrations
+					</Link>
+				</NavbarItem>
+			</NavbarContent>
+			<NavbarContent justify="end">
+				<NavbarItem className="hidden lg:flex">
+					<Link href="#">Login</Link>
+				</NavbarItem>
+				<NavbarItem>
+					<Button as={Link} color="primary" href="#" variant="flat">
+						Sign Up
+					</Button>
+				</NavbarItem>
+			</NavbarContent>
+		</Navbar>
+	);
+};

src/app/ThemeSwitcher.tsx

@@ -18,20 +18,15 @@ export const ThemeSwitcher: Component = () => {
 	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>
+		<Switch
+			defaultSelected
+			size="lg"
+			color="primary"
+			onValueChange={(value) => {
+				value ? setTheme("dark") : setTheme("light");
+			}}
+			startContent={<FiSun />}
+			endContent={<FiMoon />}
+		/>
 	);
 };

src/models/footer.ts

@@ -1,6 +1,13 @@
 import z from "zod";
 
-export const FooterPropsModel = z.object({});
+const FooterColumnModel = z.object({
+	title: z.string(),
+	links: z.object({ url: z.string().url(), text: z.string() }).array()
+});
+
+export const FooterPropsModel = z.object({
+	columns: FooterColumnModel.array()
+});
 
 export type FooterProps = z.infer<typeof FooterPropsModel>;