Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

55 lines
1.3 KiB

import { Box, CloseButton } from '@chakra-ui/react';
import { RemoveScroll } from 'react-remove-scroll';
import { RoadmapType } from '../../lib/roadmap';
import RoadmapGroup from '../../pages/[roadmap]/[group]';
type ContentDrawerProps = {
roadmap: RoadmapType;
groupId: string;
onClose?: () => void;
};
export function ContentDrawer(props: ContentDrawerProps) {
const { roadmap, groupId, onClose = () => null } = props;
if (!groupId) {
return null;
}
return (
3 years ago
<Box zIndex={99999} pos="relative">
<Box
onClick={onClose}
pos="fixed"
top={0}
left={0}
right={0}
bottom={0}
bg="black"
opacity={0.4}
/>
<RemoveScroll allowPinchZoom>
<Box
p="0px 30px 30px"
position="fixed"
3 years ago
w={['100%', '60%', '40%']}
bg="white"
top={0}
right={0}
bottom={0}
borderLeftWidth={'1px'}
overflowY="scroll"
>
<CloseButton
onClick={onClose}
pos="absolute"
top={'20px'}
right={'20px'}
zIndex={1}
/>
<RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
</Box>
</RemoveScroll>
</Box>
);
}