neat landing page

packages/docs/app/routes/docs.tsx

@@ -1,5 +1,13 @@
+import { CodeIcon } from "@heroicons/react/outline"
+import {
+  DatabaseIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
 import type { LoaderFunction } from "remix"
 import { Link, Outlet, useLoaderData } from "remix"
+import { ExternalLink } from "~/components/external-link"
+import { HeaderLayout } from "~/components/header-layout"
 import { SideNav } from "~/components/side-nav"
 import { SidebarLayout } from "~/components/sidebar-layout"
 import type { ContentIndexEntry } from "~/create-index.server"
@@ -16,21 +24,52 @@ export const loader: LoaderFunction = async () => {
 export default function Docs() {
   const data: LoaderData = useLoaderData()
   return (
-    <SidebarLayout
-      sidebar={
-        <SideNav heading="Guides">
-          {data.map(({ title, route }) => (
-            <Link className={linkClass} key={route} to={route}>
-              {title}
-            </Link>
-          ))}
-        </SideNav>
-      }
+    <HeaderLayout
+      header={<HeaderNav />}
       body={
-        <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
-          <Outlet />
-        </section>
+        <SidebarLayout
+          sidebar={
+            <SideNav heading="Guides">
+              {data.map(({ title, route }) => (
+                <Link className={linkClass} key={route} to={route}>
+                  {title}
+                </Link>
+              ))}
+            </SideNav>
+          }
+          body={
+            <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
+              <Outlet />
+            </section>
+          }
+        />
       }
     />
   )
 }
+
+function HeaderNav() {
+  return (
+    <nav className="flex justify-between items-center">
+      <Link to="/">
+        <h1 className="text-3xl font-light">
+          reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
+        </h1>
+      </Link>
+      <div className="flex gap-4">
+        <Link className={linkClass} to="/docs/guides/getting-started">
+          <DocumentTextIcon className="inline align-sub w-5" /> Guides
+        </Link>
+        <Link className={linkClass} to="/docs/api">
+          <DatabaseIcon className="inline align-sub w-5" /> API Reference
+        </Link>
+        <ExternalLink
+          className={linkClass}
+          href="https://github.com/itsMapleLeaf/reacord"
+        >
+          <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
+        </ExternalLink>
+      </div>
+    </nav>
+  )
+}