split stuff up

packages/docs/app/hooks/dom/use-scrolled.ts

@@ -0,0 +1,8 @@
+import { useState } from "react"
+import { useWindowEvent } from "~/hooks/dom/use-window-event"
+
+export function useScrolled() {
+  const [scrolled, setScrolled] = useState(false)
+  useWindowEvent("scroll", () => setScrolled(window.scrollY > 0))
+  return scrolled
+}

packages/docs/app/hooks/dom/use-window-event.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react"
+
+export function useWindowEvent<EventType extends keyof WindowEventMap>(
+  type: EventType,
+  handler: (event: WindowEventMap[EventType]) => void,
+) {
+  useEffect(() => {
+    window.addEventListener(type, handler)
+    return () => window.removeEventListener(type, handler)
+  })
+}