Files
me/src/layouts/common/backToTop/BackToTop.jsx
T
Dan Dobos 4aa5040ef5 Refactor code style for consistency and readability
- Updated import statements to use double quotes instead of single quotes across multiple files.
- Reformatted JSX return statements for better alignment and readability.
- Added missing newlines at the end of files where necessary.
- Adjusted component structure for improved clarity in the Landing, Blog, BestPractices, and Projects pages.
- Enhanced error boundary component for better error handling.
- Updated theme overrides for Material-UI components to maintain consistent styling.
2025-10-17 17:13:54 +02:00

62 lines
1.5 KiB
React

import React from "react";
import { Grid, Grow, useScrollTrigger } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { useTheme } from "@mui/material/styles";
function ScrollTop(props) {
const { children, window } = props;
// Note that you normally won't need to set the window ref as useScrollTrigger
// will default to window.
// This is only being set here because the demo is in an iframe.
const trigger = useScrollTrigger({
target: window ? window() : undefined,
disableHysteresis: true,
threshold: 100,
});
const handleClick = (event) => {
const anchor = (event.target.ownerDocument || document).querySelector(
"#back-to-top-anchor",
);
if (anchor) {
anchor.scrollIntoView({ behavior: "smooth", block: "center" });
}
};
return (
<Grow in={trigger}>
<div onClick={handleClick} role="presentation">
{children}
</div>
</Grow>
);
}
const BackToTop = (props) => {
const theme = useTheme();
return (
<Grid
sx={{
position: "fixed",
bottom: theme.spacing(2),
left: theme.spacing(1),
}}
id="footer"
>
<ScrollTop {...props}>
<KeyboardArrowUpIcon
sx={{
width: "5rem",
height: "5rem",
[theme.breakpoints.down("md")]: { width: "3rem", height: "3rem" },
}}
/>
</ScrollTop>
</Grid>
);
};
export default BackToTop;