refactor(docs): share site header and footer

docs/src/pages/settings.tsx

@@ -1,7 +1,11 @@
 import { Icon } from "@icones/react"
 import { usePreference } from "@workspace/preferences"
 
-import { BackButton, Container, SlashLine } from "../components/layout"
+import {
+  Container,
+  SiteFooter,
+  SiteHeader,
+} from "../components/layout"
 import { LocaleFlag } from "../components/locale-flag"
 import { SearchTrigger } from "../components/search-trigger"
 import { Swatch } from "../components/swatch"
@@ -80,19 +84,16 @@ export default function SettingsPage() {
 
   return (
     <>
-      <header className="border-b bg-white/70 backdrop-blur-sm dark:border-slate-800 dark:bg-slate-950/80">
-        <Container className="flex h-16 items-center gap-4">
-          <BackButton />
-          <SlashLine />
+      <SiteHeader
+        subleading={
           <h1 className="text-xl font-semibold">{t(messages.settings)}</h1>
-          <div className="ml-auto">
-            <SearchTrigger />
-          </div>
-        </Container>
-      </header>
+        }
+        className="h-16 border-b bg-white/70 backdrop-blur-sm dark:border-slate-800 dark:bg-slate-950/80"
+        actions={<SearchTrigger />}
+      />
 
       <main>
-        <Container className="py-8 sm:py-12">
+        <Container className="pt-8 sm:pt-12">
           <section aria-labelledby="appearance-heading">
             <h2 id="appearance-heading" className="mb-4 text-xl font-semibold">
               {t(messages.appearance)}
@@ -271,6 +272,7 @@ export default function SettingsPage() {
           </section>
         </Container>
       </main>
+      <SiteFooter />
     </>
   )
 }