import clsx from "clsx"
import { useEffect, useState } from "react"
import type { LinksFunction, MetaFunction } from "remix"
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "remix"
export const meta: MetaFunction = () => {
return { title: "New Remix App" }
}
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: "/tailwind.css" },
]
export default function App() {
return (
{process.env.NODE_ENV === "development" && }
)
}
function Header() {
const isScrolled = useScrolled()
return (
)
}
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
}