|  |  | 
 |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
 |  |  | import { useTranslate } from "react-admin"; | 
 |  |  | import { Drawer, Box, Typography, Grid, IconButton, Stack, useTheme } from '@mui/material'; | 
 |  |  | import CloseIcon from '@mui/icons-material/Close'; | 
 |  |  | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const Insight = (props) => { | 
 |  |  |     const { open, onCancel } = props; | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const themeMode = theme.palette.mode; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     const handleClose = () => { | 
 |  |  |         onCancel(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |  | 
 |  |  |             <Drawer | 
 |  |  |                 variant="persistent" | 
 |  |  |                 open={open} | 
 |  |  |                 anchor="right" | 
 |  |  |                 onClose={handleClose} | 
 |  |  |                 sx={{ zIndex: 100, opacity: .8 }} | 
 |  |  |             > | 
 |  |  |                 {open && ( | 
 |  |  |                     <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{ | 
 |  |  |                     }}> | 
 |  |  |                         <Stack direction="row" p={2}> | 
 |  |  |                             <Typography variant="h6" flex="1"> | 
 |  |  |                                 {title || translate('page.map.settings.title')} | 
 |  |  |                             </Typography> | 
 |  |  |                             <IconButton onClick={handleClose} size="small"> | 
 |  |  |                                 <CloseIcon /> | 
 |  |  |                             </IconButton> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Box p={3}> | 
 |  |  |                         </Box> | 
 |  |  |                     </Box> | 
 |  |  |                 )} | 
 |  |  |             </Drawer> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } |