systems-obscure/src/templates/MainTemplate.jsx

// @ts-nocheck

import gruvboxComputer from "../images/gruvbox-computer.svg"
import { Link } from "react-router"
const Header = () => {
	return (
		<header className="py-6">
			<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
				<Link to="/">
					<div className="scanlined">
						<img src={gruvboxComputer} className="w-11" />
					</div>
				</Link>
				<ul class="flex space-x-4 px-4 py-2 text-sm">
					<li class="flex flex-col items-center justify-center">
						<Link
							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
							to="/posts"
						>
							posts
						</Link>
					</li>
					<li class="flex flex-col items-center justify-center">
						<Link
							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
							to="/about"
						>
							about
						</Link>
					</li>
				</ul>
			</nav>
		</header>
	)
}

const Footer = () => {
	return (
		<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
			<nav>
				<ul className="flex flex-row justify-start gap-4">
					<li className="flex flex-col items-center justify-center">
						<a
							className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
							href="https://forgejo.systemsobscure.net/thomasabishop"
							target="blank"
						>
							forgejo
						</a>
					</li>
				</ul>
			</nav>
		</footer>
	)
}

const MainTemplate = ({ children }) => {
	return (
		<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
			<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
				<Header />
				<div>{children}</div>
				<Footer />
			</main>
		</div>
	)
}
export default MainTemplate