26 lines
726 B
TypeScript
26 lines
726 B
TypeScript
import { Affix, Button, Transition, rem } from "@mantine/core";
|
|
import { useWindowScroll } from "@mantine/hooks";
|
|
import { TbArrowUp } from "react-icons/tb";
|
|
|
|
export default function ScrollTop() {
|
|
const [scroll, scrollTo] = useWindowScroll();
|
|
|
|
return (
|
|
<Affix position={{ bottom: 20, right: 20 }}>
|
|
<Transition transition="slide-up" mounted={scroll.y > 0}>
|
|
{(transitionStyles) => (
|
|
<Button
|
|
leftSection={
|
|
<TbArrowUp style={{ width: rem(16), height: rem(16) }} />
|
|
}
|
|
style={transitionStyles}
|
|
onClick={() => scrollTo({ y: 0 })}
|
|
>
|
|
Scroll to top
|
|
</Button>
|
|
)}
|
|
</Transition>
|
|
</Affix>
|
|
);
|
|
}
|