️ Reduce state updates

This commit is contained in:
Luke Vella 2025-05-31 15:30:47 +01:00
parent 07835f5f2e
commit a38c1d8587
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C

View file

@ -5,18 +5,28 @@ import { ArrowUpRightIcon } from "lucide-react";
import GithubIcon from "@/assets/github.svg";
import { Trans } from "@/i18n/client/trans";
import { cn } from "@rallly/ui";
import { useWindowScroll } from "react-use";
import React from "react";
export function OpenSourceBanner() {
const { y } = useWindowScroll();
const [visible, setVisible] = React.useState(true);
React.useEffect(() => {
function setVisibility() {
setVisible(window.scrollY < 20);
}
window.addEventListener("scroll", setVisibility);
return () => {
window.removeEventListener("scroll", setVisibility);
};
}, []);
return (
<div
className={cn(
"bg-gray-800 z-50 transition-transform h-11 overflow-hidden hover:underline fixed top-0 w-full flex items-center text-sm rounded-none text-gray-100 justify-center gap-4",
{
"translate-y-0": y <= 0,
"-translate-y-full": y > 20,
"translate-y-0": visible,
"-translate-y-full": !visible,
},
)}
>