|  |  | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |         <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> | 
 |  |  |             <Tabs | 
 |  |  |                 value={activeTab} | 
 |  |  |                 onChange={handleTabChange} | 
 |  |  |                 indicatorColor="primary" | 
 |  |  |                 textColor="primary" | 
 |  |  |                 centered | 
 |  |  |                 sx={{ mb: 0 }} | 
 |  |  |             > | 
 |  |  |                 <Tab label={translate('page.map.settings.map.title')} /> | 
 |  |  |                 <Tab label={translate('page.map.settings.config.title')} /> | 
 |  |  |                 <Tab label={translate('page.map.insight.title')} /> | 
 |  |  |                 <Tab label={'JSON'} /> | 
 |  |  |             </Tabs> | 
 |  |  |  | 
 |  |  |             <Divider /> | 
 |  |  |  | 
 |  |  |             <Box pt={1}> | 
 |  |  |             <Box flex={1} pt={2}> | 
 |  |  |                 {activeTab === 0 && ( | 
 |  |  |                     <ShelfMain | 
 |  |  |                         data={sprite?.data} | 
 |  |  | 
 |  |  |                     /> | 
 |  |  |                 )} | 
 |  |  |             </Box> | 
 |  |  |         </> | 
 |  |  |         </Box> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  |