frontend/containers/TravelColumns/Dots.tsx (view raw)
1import {createPortal} from 'react-dom';
2import Box from '@mui/material/Box';
3
4const Dots = ({children}) => {
5 const element = document.getElementById('slider-dots');
6 if (!element) return null;
7
8 return createPortal(
9 <Box
10 className="slick-dots"
11 component="ul"
12 height={1}
13 display="flex"
14 alignItems="center"
15 >
16 <Box display="flex" margin="0 auto">
17 {children}
18 </Box>
19 </Box>,
20 document.getElementById('slider-dots')
21 );
22};
23
24export default Dots;