dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { useEffect, useState } from "react";
2import { useTranslation } from "react-i18next";
3
4import { Icon, Icons } from "@/components/Icon";
5
6export function ScrollToTopButton() {
7 const { t } = useTranslation();
8 const [isVisible, setIsVisible] = useState(false);
9
10 const toggleVisibility = () => {
11 const scrolled = window.scrollY > 300;
12 setIsVisible(scrolled);
13 };
14
15 useEffect(() => {
16 const handleScroll = () => {
17 const timeout = setTimeout(toggleVisibility, 100);
18 return () => clearTimeout(timeout);
19 };
20
21 window.addEventListener("scroll", handleScroll);
22 return () => window.removeEventListener("scroll", handleScroll);
23 }, []);
24
25 const scrollToTop = () => {
26 window.scrollTo({ top: 0, behavior: "smooth" });
27 };
28
29 return (
30 <div className="fixed bottom-9 md:bottom-4 transform -translate-x-1/2 z-50 left-12 md:left-1/2">
31 <div
32 className={`absolute inset-0 mx-auto h-[50px] w-[200px] rounded-full blur-[50px] opacity-50 pointer-events-none z-0 ${
33 isVisible ? "opacity-100 visible" : "opacity-0 invisible"
34 }`}
35 style={{
36 backgroundImage: `linear-gradient(to right, rgba(var(--colors-buttons-purpleHover)), rgba(var(--colors-progress-filled)))`,
37 transition: "opacity 0.4s ease-in-out, transform 0.2s ease-in-out",
38 }}
39 />
40 <button
41 type="button"
42 onClick={scrollToTop}
43 className={`relative backdrop-blur-sm flex items-center justify-center space-x-2 rounded-full px-3 py-3 md:py-2 text-lg font-semibold text-white bg-pill-background bg-opacity-80 hover:bg-pill-backgroundHover transition-opacity hover:scale-105 duration-500 ease-in-out ${
44 isVisible ? "opacity-100 visible" : "opacity-0 invisible"
45 }`}
46 style={{
47 transition: "opacity 0.4s ease-in-out, transform 0.2s ease-in-out",
48 }}
49 >
50 <Icon icon={Icons.CHEVRON_UP} className="text-2xl z-10" />
51 <span className="z-10 hidden md:block">
52 {t("discover.scrollToTop")}
53 </span>
54 </button>
55 </div>
56 );
57}