split stuff up

packages/docs/app/components/header.tsx

@@ -0,0 +1,16 @@
+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>
+  )
+}