app/layout.tsx · boardgame-lib

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { LayoutNav } from "@/components/ui/Nav";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "boardgame library App",
  description: "Generated by create next app",
};

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(" ");
}

export default function Example({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <body className={inter.className + " " + "h-full"}>
        <div className="min-h-full bg-gray-100 flex-col">
          <LayoutNav />

          <main className="-mt-24 pb-8 h-full">
            <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
              <h1 className="sr-only">Page title</h1>
              <div className="grid grid-cols-1 gap-4 lg:col-span-2">
                <section aria-labelledby="section-1-title">
                  <h2 className="sr-only" id="section-1-title">
                    Section title
                  </h2>
                  <div className="overflow-hidden rounded-lg bg-white shadow min-h-[400px] ">
                    {children}
                  </div>
                </section>
              </div>
            </div>
          </main>
          <footer>
            <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
              <div className="border-t border-gray-200 py-8 text-center text-sm text-gray-500 sm:text-left">
                <span className="block sm:inline">Game on!!!</span>{" "}
              </div>
            </div>
          </footer>
        </div>
      </body>
    </html>
  );
}