2024-07-29 18:15:04 +02:00

27 lines
868 B
TypeScript

import React, { useEffect } from "react";
import classes from "./classes.module.scss";
import Mobile from "./mobile";
import Desktop from "./desktop";
import Tablet from "./tablet";
type IProps = {
className?: string;
hasLeftPadding?: boolean;
};
export default function Footer({ className, hasLeftPadding = false }: IProps) {
const footerRef = React.useRef<HTMLDivElement>(null);
useEffect(() => {
if (!footerRef.current) return;
const footerHeight = footerRef.current.clientHeight + 1;
document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`);
});
return (
<footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} ref={footerRef}>
<Mobile className={classes["mobile"]} />
<Tablet className={classes["tablet"]} />
<Desktop className={classes["desktop"]} />
</footer>
);
}