1
import type { ReactNode } from "react";
2
 
3
import { Header } from "@/client/components/header";
4
import { Footer } from "@/client/components/footer";
5
import type { Viewer } from "@/client/server/viewer";
6
 
7
type AppLayoutProps = {
8
  children: ReactNode;
9
  currentView?: string;
10
  viewer?: Viewer | null;
11
};
12
 
13
export function AppLayout({ children, currentView, viewer }: AppLayoutProps) {
14
  return (
15
    <>
16
      <a
17
        href="#main-content"
18
        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[200] focus:rounded-lg focus:bg-zinc-900 focus:px-4 focus:py-2 focus:text-accent-400 focus:ring-2 focus:ring-accent-500/50"
19
      >
20
        Skip to content
21
      </a>
22
      <div className="relative z-10 flex min-h-screen flex-col sm:h-screen">
23
        <Header currentView={currentView} viewer={viewer ?? null} />
24
        <main
25
          id="main-content"
26
          className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:overflow-y-auto sm:px-6 min-w-0"
27
        >
28
          <div className="animate-slide-up">{children}</div>
29
        </main>
30
        <Footer />
31
      </div>
32
    </>
33
  );
34
}