app/components/page-shell.tsx

Functions

Imports

It imports app/components/shell-footer.tsx, app/components/site-header.tsx. Imported by app/routes/about.tsx, app/routes/colophon.tsx, app/routes/contact.tsx, app/routes/content-page.tsx, app/routes/cv.tsx, app/routes/gone.tsx, app/routes/kb-library.tsx, app/routes/lab.kind.tsx, app/routes/lab.tsx, app/routes/phages.tsx, app/routes/procedure.tsx, app/routes/procedure.version.tsx, app/routes/protocols.tsx, app/routes/site-map.tsx, app/routes/systems.tsx.

Source

1import { ShellFooter } from "~/components/shell-footer";
2import { SiteHeader } from "~/components/site-header";
3
4/**
5 * The plain page: header, a `main` holding one `page-inner` column, footer. `lead` and `trail`
6 * sit in `main` outside the column, for a page's JSON-LD script.
7 */
8export function PageShell({
9  lead,
10  trail,
11  children,
12}: {
13  lead?: React.ReactNode;
14  trail?: React.ReactNode;
15  children: React.ReactNode;
16}) {
17  return (
18    <>
19      <SiteHeader />
20      <main className="page" id="main" tabIndex={-1}>
21        {lead}
22        <div className="page-inner">{children}</div>
23        {trail}
24      </main>
25      <ShellFooter />
26    </>
27  );
28}