53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { Button } from "antd";
|
|
import TopIcon from "components/Icons/TopIcon";
|
|
import { useScrollHandler } from "contexts/ScrollHandlerContext";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import { useCallback } from "react";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { colors } from "ThemeConstants";
|
|
import styles from "./FloatingButton.module.css";
|
|
|
|
export function FloatingButton() {
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const { isMobile, isTablet } = useBreakPoint();
|
|
|
|
const { showScrollTop } = useScrollHandler();
|
|
|
|
const scrollToTop = useCallback(() => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{/* Floating Scroll to Top Button */}
|
|
{showScrollTop && (
|
|
<Button
|
|
type="primary"
|
|
shape="circle"
|
|
size={isMobile ? "large" : "large"}
|
|
icon={<TopIcon />}
|
|
onClick={scrollToTop}
|
|
className={`${styles.scrollToTopButton}`}
|
|
style={{
|
|
position: "fixed",
|
|
bottom: isMobile ? "100px" : isTablet ? "100px" : "20px",
|
|
right: isRTL ? "auto" : "20px",
|
|
left: isRTL ? "20px" : "auto",
|
|
zIndex: 1000,
|
|
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
|
|
backgroundColor:
|
|
themeName === "dark" ? colors.primary : colors.primary,
|
|
borderColor: themeName === "dark" ? colors.primary : colors.primary,
|
|
width: isMobile ? 48 : 56,
|
|
height: isMobile ? 48 : 56,
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|