CoastalCommitsPastes/client/app/components/scroll-to-top/index.tsx

59 lines
1.4 KiB
TypeScript
Raw Normal View History

2022-11-12 21:39:03 -05:00
import Tooltip from "@components/tooltip"
import { Button, Spacer } from "@geist-ui/core/dist"
2022-04-09 20:48:19 -04:00
import ChevronUp from "@geist-ui/icons/chevronUpCircleFill"
import { useEffect, useState } from "react"
import styles from "./scroll.module.css"
const ScrollToTop = () => {
2022-04-09 20:48:19 -04:00
const [shouldShow, setShouldShow] = useState(false)
useEffect(() => {
// if user is scrolled, set visible
const handleScroll = () => {
setShouldShow(window.scrollY > 100)
}
window.addEventListener("scroll", handleScroll)
return () => window.removeEventListener("scroll", handleScroll)
}, [])
2022-04-09 20:48:19 -04:00
const isReducedMotion =
typeof window !== "undefined"
? window.matchMedia("(prefers-reduced-motion: reduce)").matches
: false
const onClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
e.currentTarget.blur()
2022-04-09 20:48:19 -04:00
window.scrollTo({ top: 0, behavior: isReducedMotion ? "auto" : "smooth" })
}
2022-04-09 20:48:19 -04:00
return (
<div
style={{
display: "flex",
flexDirection: "row",
width: "100%",
height: 24,
justifyContent: "flex-end"
}}
>
<Tooltip
2022-11-12 21:39:03 -05:00
content="Scroll to Top"
2022-04-09 20:48:19 -04:00
className={`${styles["scroll-up"]} ${
shouldShow ? styles["scroll-up-shown"] : ""
}`}
>
<Button
aria-label="Scroll to Top"
onClick={onClick}
style={{ background: "var(--light-gray)" }}
auto
>
<Spacer height={2 / 3} inline width={0} />
<ChevronUp />
</Button>
</Tooltip>
</div>
)
}
2022-04-09 20:48:19 -04:00
export default ScrollToTop