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="md:py-6 pb-4">
      <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