35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { Box, Flex, ScrollArea } from "@mantine/core";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface InternalScreenProps {
|
|
children: any;
|
|
}
|
|
export function InternalScreen(props : InternalScreenProps) {
|
|
const [scrollAreaHeight, setScrollAreaHeight] = useState(window.innerHeight);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => setScrollAreaHeight(window.innerHeight);
|
|
window.addEventListener("resize", handleResize);
|
|
handleResize();
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
}, []);
|
|
|
|
return (
|
|
<Flex align={'center'} justify={'center'}>
|
|
<Box maw={650} w={'100%'}>
|
|
<ScrollArea
|
|
type="hover"
|
|
offsetScrollbars={"y"}
|
|
scrollHideDelay={1500}
|
|
scrollbarSize={7}
|
|
w={'100%'}
|
|
h={scrollAreaHeight - 100} // Adjust height with an offset
|
|
>
|
|
<Box pb={'lg'} pl={'md'} pt={'md'} pr={'sm'}>
|
|
{props.children}
|
|
</Box>
|
|
</ScrollArea>
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
} |