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

basic styling and a fancy header

Browse Source
This commit is contained in:
MapleLeaf
2021-12-29 16:24:17 -06:00
parent 78607b7589
commit 401fcd2f16
3 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,5 @@
import clsx from "clsx"
import { useEffect, useState } from "react"
import type { LinksFunction, MetaFunction } from "remix" import type { LinksFunction, MetaFunction } from "remix"
import { import {
Links, Links,
@@ -18,7 +20,7 @@ export const links: LinksFunction = () => [
export default function App() { export default function App() {
return ( return (
<html lang="en"> <html lang="en" className="bg-slate-900 text-slate-100">
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -26,7 +28,10 @@ export default function App() {
<Links /> <Links />
</head> </head>
<body> <body>
<Header />
<div className="m-auto max-w-screen-xl mt-8">
<Outlet /> <Outlet />
</div>
<ScrollRestoration /> <ScrollRestoration />
<Scripts /> <Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />} {process.env.NODE_ENV === "development" && <LiveReload />}
@@ -34,3 +39,36 @@ export default function App() {
</html> </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
}

1
packages/docs/package.json
View File

@@ -13,6 +13,7 @@
"@remix-run/react": "^1.1.1", "@remix-run/react": "^1.1.1",
"@remix-run/serve": "^1.1.1", "@remix-run/serve": "^1.1.1",
"autoprefixer": "^10.4.1", "autoprefixer": "^10.4.1",
"clsx": "^1.1.1",
"postcss": "^8.4.5", "postcss": "^8.4.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",

7
pnpm-lock.yaml generated
View File

@@ -42,6 +42,7 @@ importers:
'@types/react': ^17.0.24 '@types/react': ^17.0.24
'@types/react-dom': ^17.0.9 '@types/react-dom': ^17.0.9
autoprefixer: ^10.4.1 autoprefixer: ^10.4.1
clsx: ^1.1.1
concurrently: ^6.5.1 concurrently: ^6.5.1
postcss: ^8.4.5 postcss: ^8.4.5
prettier: ^2.5.1 prettier: ^2.5.1
@@ -56,6 +57,7 @@ importers:
'@remix-run/react': 1.1.1_react-dom@17.0.2+react@17.0.2 '@remix-run/react': 1.1.1_react-dom@17.0.2+react@17.0.2
'@remix-run/serve': 1.1.1_react-dom@17.0.2+react@17.0.2 '@remix-run/serve': 1.1.1_react-dom@17.0.2+react@17.0.2
autoprefixer: 10.4.1_postcss@8.4.5 autoprefixer: 10.4.1_postcss@8.4.5
clsx: 1.1.1
postcss: 8.4.5 postcss: 8.4.5
react: 17.0.2 react: 17.0.2
react-dom: 17.0.2_react@17.0.2 react-dom: 17.0.2_react@17.0.2
@@ -2325,6 +2327,11 @@ packages:
engines: {node: '>=0.8'} engines: {node: '>=0.8'}
dev: true dev: true
/clsx/1.1.1:
resolution: {integrity: sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==}
engines: {node: '>=6'}
dev: false
/co/4.6.0: /co/4.6.0:
resolution: {integrity: sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=} resolution: {integrity: sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=}
engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}