|  |  | 
 |  |  | import CloseIcon from '@mui/icons-material/Close'; | 
 |  |  | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; | 
 |  |  | import MapSettings from './MapSettings'; | 
 |  |  | import ConfigSettings from './ConfigSettings'; | 
 |  |  |  | 
 |  |  | const Settings = (props) => { | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title, setSpriteSettings } = props; | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const themeMode = theme.palette.mode; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |     }, []) | 
 |  |  |         console.log(sprite); | 
 |  |  |  | 
 |  |  |     }, [sprite]) | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  | 
 |  |  |                     }}> | 
 |  |  |                         <Stack direction="row" p={2}> | 
 |  |  |                             <Typography variant="h6" flex="1"> | 
 |  |  |                                 {title || translate('page.map.settings.title')} | 
 |  |  |                                 {sprite | 
 |  |  |                                     ? translate(`page.map.devices.${sprite?.data?.type?.toLowerCase()}`) + ' - ' + sprite?.data?.uuid | 
 |  |  |                                     : translate('page.map.settings.title')} | 
 |  |  |                             </Typography> | 
 |  |  |                             <IconButton onClick={handleClose} size="small"> | 
 |  |  |                                 <CloseIcon /> | 
 |  |  | 
 |  |  |                                         {activeTab === 0 && ( | 
 |  |  |                                             <MapSettings | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 setSpriteSettings={setSpriteSettings} | 
 |  |  |                                                 onSubmit={() => { | 
 |  |  |                                                     alert('MapSettings') | 
 |  |  |                                                 }} | 
 |  |  |                                             /> | 
 |  |  |                                         )} | 
 |  |  | 
 |  |  |                                             <ConfigSettings | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 onSubmit={() => { | 
 |  |  |                                                     alert('ConfigSettings') | 
 |  |  |                                                 }} | 
 |  |  |                                             /> | 
 |  |  |                                         )} | 
 |  |  | 
 |  |  |                 )} | 
 |  |  |             </Drawer> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const ConfigSettings = () => { | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <h1>ConfigSettings</h1> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  |