make things pretty

packages/docs/app/components/external-link.tsx

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {props.children}
+    </a>
+  )
+}

packages/docs/app/components/header-layout.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx"
+import { useScrolled } from "~/hooks/dom/use-scrolled"
+
+export function HeaderLayout({
+  header,
+  body,
+}: {
+  header: React.ReactNode
+  body: React.ReactNode
+}) {
+  const isScrolled = useScrolled()
+  return (
+    <div className="isolate">
+      <header
+        className={clsx(
+          isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10",
+        )}
+      >
+        <div className="m-auto max-w-screen-lg px-6">{header}</div>
+      </header>
+      <div className="m-auto max-w-screen-lg px-6 mt-6">{body}</div>
+    </div>
+  )
+}

packages/docs/app/components/header.tsx

@@ -1,16 +0,0 @@
-import clsx from "clsx"
-import { useScrolled } from "~/hooks/dom/use-scrolled"
-
-export function Header({ children }: { children: React.ReactNode }) {
-  const isScrolled = useScrolled()
-  return (
-    <header
-      className={clsx(
-        isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-        "shadow-md sticky top-0 px-4 py-3 backdrop-blur-sm transition",
-      )}
-    >
-      {children}
-    </header>
-  )
-}

packages/docs/app/components/side-nav.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react"
+
+export function SideNav({
+  heading,
+  children,
+}: {
+  heading: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <nav className="w-64 sticky top-0">
+      <h2 className="text-2xl mt-1">{heading}</h2>
+      <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
+    </nav>
+  )
+}

packages/docs/app/components/sidebar-layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+
+export function SidebarLayout({
+  sidebar,
+  body,
+}: {
+  sidebar: ReactNode
+  body: ReactNode
+}) {
+  const [offsetTop, setOffsetTop] = useState(0)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
+  }, [sidebarRef])
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
+        {sidebar}
+      </div>
+      <div className="flex-1">{body}</div>
+    </div>
+  )
+}