kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

split stuff up

Browse Source
This commit is contained in:
MapleLeaf
2021-12-29 17:12:42 -06:00
parent 401fcd2f16
commit eef9d3a0bc
5 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/docs/app/components/header.tsx Normal file
View File

@@ -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>
)
}

8
packages/docs/app/hooks/dom/use-scrolled.ts Normal file
View File

@@ -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
}

11
packages/docs/app/hooks/dom/use-window-event.ts Normal file
View File

@@ -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)
})
}

44
packages/docs/app/root.tsx
View File

@@ -1,5 +1,3 @@
import clsx from "clsx"
import { useEffect, useState } from "react"
import type { LinksFunction, MetaFunction } from "remix"
import {
Links,
@@ -9,6 +7,7 @@ import {
Scripts,
ScrollRestoration,
} from "remix"
import { Header } from "~/components/header"
export const meta: MetaFunction = () => {
return { title: "New Remix App" }
@@ -28,8 +27,12 @@ export default function App() {
<Links />
</head>
<body>
<Header />
<div className="m-auto max-w-screen-xl mt-8">
<Header>
<div className="m-auto max-w-screen-xl px-4">
<h1 className="text-3xl font-light">reacord</h1>
</div>
</Header>
<div className="m-auto max-w-screen-xl px-4 mt-8">
<Outlet />
</div>
<ScrollRestoration />
@@ -39,36 +42,3 @@ export default function App() {
</html>
)
}
function Header() {
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",
)}
>
<div className="m-auto max-w-screen-xl">
<h1 className="text-3xl font-light">reacord</h1>
</div>
</header>
)
}
function useScrolled() {
const [isScrolled, setScrolled] = useState(
typeof window !== "undefined" && window.scrollY > 0,
)
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 0)
}
window.addEventListener("scroll", handleScroll)
return () => window.removeEventListener("scroll", handleScroll)
}, [])
return isScrolled
}

4
packages/docs/app/routes/index.tsx
View File

@@ -9,7 +9,9 @@ export default function Index() {
const data: DocsJson = useLoaderData()
return (
<main>
<pre>{JSON.stringify(data, undefined, 2)}</pre>
<pre className="w-full overflow-x-auto">
{JSON.stringify(data, undefined, 2)}
</pre>
</main>
)
}