mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-06 19:17:27 +02:00
⚡️ Reduce state updates
This commit is contained in:
parent
07835f5f2e
commit
a38c1d8587
1 changed files with 14 additions and 4 deletions
|
@ -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,
|
||||
},
|
||||
)}
|
||||
>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue