Add global layout

with the ability to be overridden per-page

website/src/components/AuthLayout.tsx

@@ -1,14 +1,8 @@
-import Link from "next/link";
-import Image from "next/image";
-
 export function AuthLayout({ children }) {
   return (
-    <main className="flex items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28 subpixel-antialiased">
+    <main className="flex items-center justify-center sm:py-4 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
-        <Link href="/" aria-label="Home" className="flex items-center text-3xl font-bold text-black">
-          <Image src="/images/logos/logo.svg" width="100" height="100" alt="Open Assistant Logo" /> Open Assistant
-        </Link>
-        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-20">
+        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
           {children}
         </div>
       </div>

website/src/components/Footer.tsx

@@ -6,9 +6,9 @@ import { NavLinks } from "./NavLinks";
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
+    <footer className="border-t border-gray-200 bg-white">
       <Container className="">
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
+        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-6">
           <div>
             <div className="flex items-center text-gray-900">
               <Link href="/" aria-label="Home" className="flex items-center">
@@ -20,7 +20,9 @@ export function Footer() {
                 <p className="mt-1 text-sm">Conversational AI for everyone.</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
+            {/* <nav className="mt-11 flex gap-8">
+              <NavLinks />
+            </nav> */}
           </div>
         </div>
       </Container>

website/src/components/Header.tsx

@@ -55,9 +55,9 @@ function AccountButton() {
 
 export function Header() {
   return (
-    <header>
+    <header className="bg-white">
       <nav>
-        <Container className="relative bg-white z-10 flex justify-between py-8">
+        <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home" className="flex items-center">
               <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />

website/src/components/Layout.tsx

@@ -0,0 +1,20 @@
+// https://nextjs.org/docs/basic-features/layouts
+
+import type { NextPage } from "next";
+
+import { Footer } from "./Footer";
+import { Header } from "./Header";
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
+
+export const getDefaultLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header />
+    {page}
+    <Footer />
+  </div>
+);
+
+export const noLayout = (page: React.ReactElement) => page;