46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
|
import { ArrowUp } from "lucide-react";
|
||
|
|
import { AnimatePresence, m } from "framer-motion";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useI18n } from "../i18n";
|
||
|
|
|
||
|
|
const SHOW_AFTER = 400;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Floating "back to top" button. Appears once the page is scrolled past
|
||
|
|
* SHOW_AFTER px and smoothly returns the window to the top on click. Sits
|
||
|
|
* above the mobile bottom nav and clears it on larger screens.
|
||
|
|
*/
|
||
|
|
export function BackToTop() {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const [visible, setVisible] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const update = () => setVisible(window.scrollY > SHOW_AFTER);
|
||
|
|
update();
|
||
|
|
window.addEventListener("scroll", update, { passive: true });
|
||
|
|
return () => window.removeEventListener("scroll", update);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AnimatePresence>
|
||
|
|
{visible ? (
|
||
|
|
<m.button
|
||
|
|
type="button"
|
||
|
|
initial={{ opacity: 0, scale: 0.8, y: 8 }}
|
||
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, scale: 0.8, y: 8 }}
|
||
|
|
transition={{ type: "spring", stiffness: 380, damping: 26 }}
|
||
|
|
onClick={() =>
|
||
|
|
window.scrollTo({ top: 0, behavior: "smooth" })
|
||
|
|
}
|
||
|
|
className="fixed bottom-[94px] right-4 z-30 flex h-11 w-11 items-center justify-center rounded-full bg-ark-gold text-black shadow-lg shadow-black/40 outline-none transition hover:bg-ark-gold2 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:bottom-8 md:right-8"
|
||
|
|
aria-label={t("backToTop")}
|
||
|
|
title={t("backToTop")}
|
||
|
|
>
|
||
|
|
<ArrowUp className="h-5 w-5" strokeWidth={2.4} />
|
||
|
|
</m.button>
|
||
|
|
) : null}
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
}
|