Page Layouts and Site Components

import {
  PageHeader,
  SiteContainer,
  SiteFooter,
  SiteHeading,
  SiteNavigation,
  SiteSection,
  SiteText,
} from '@n3wth/ui/site'

export function ReferencePage() {
  return (
    <>
      <SiteNavigation
        brand={<a href="/ui/quickstart">UI</a>}
        links={<a href="/ui/layouts" aria-current="page">Layouts</a>}
        actions={<a href="https://github.com/n3wth/n3wth">Source</a>}
      />
      <SiteContainer as="main" className="n3wth-site-main">
        <PageHeader
          title="Reference"
          description="Shared page structure for a React application."
          actions={<a href="#layout">Read the layout notes</a>}
        />
        <SiteSection id="layout">
          <SiteHeading>Layout</SiteHeading>
          <SiteText>Use one container to align the page content.</SiteText>
        </SiteSection>
      </SiteContainer>
      <SiteFooter
        brand={<a href="/ui/quickstart">UI documentation</a>}
        links={<a href="https://github.com/n3wth/n3wth">Source</a>}
      />
    </>
  )
}