Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 4x 4x 4x 4x 4x 4x 4x 3x 3x 1x 3x 2x 2x 2x 3x | import { KeyboardArrowUp as KeyboardArrowUpIcon } from '@mui/icons-material';
import { Box, Fab } from '@mui/material';
import React from 'react';
import { SectionFadeIn } from '@/components/elements';
import { scrollToTop } from '@/utils/elements';
export const BackToTopButton = React.memo(function _(props: { isVisible: () => boolean }) {
const { isVisible } = props;
const [visible, setVisible] = React.useState(false);
const backToTop = React.useCallback(() => {
scrollToTop();
}, []);
React.useEffect(() => {
const onScroll = () => setVisible(isVisible());
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, [isVisible]);
return (
<Box sx={{ position: 'fixed', right: 24, bottom: 40, zIndex: 1, opacity: 0.75 }}>
<SectionFadeIn in={visible}>
<Fab onClick={backToTop} sx={{ width: 40, height: 40 }} data-testid="BackToTopButton__Fab">
<KeyboardArrowUpIcon />
</Fab>
</SectionFadeIn>
</Box>
);
});
|