| import { ListItem, ListItemIcon, ListItemText, ListItemButton, Box, ListItemSecondaryAction } from "@mui/material"; | 
| import React, { useState, useRef, useEffect, useMemo } from "react"; | 
| import * as Icons from '@mui/icons-material'; | 
|   | 
| const Warehouse = (props) => { | 
|     const { record } = props; | 
|     const IconComponent = Icons[record.icon]; | 
|     return ( | 
|         <Box sx={{padding: '5px'}}> | 
|             <ListItem disablePadding> | 
|                 <ListItemButton > | 
|                     <ListItemIcon sx={{ minWidth: '30px' }}> | 
|                         <IconComponent /> | 
|                     </ListItemIcon> | 
|                     <ListItemText primary={record.name} /> | 
|                     <ListItemSecondaryAction> | 
|                         <Box | 
|                             component="span" | 
|                             sx={{ | 
|                                 marginRight: '1em', | 
|                                 color: 'text.primary', | 
|                             }} | 
|                         > | 
|                             {record.locCount} | 
|                         </Box> | 
|                     </ListItemSecondaryAction> | 
|                 </ListItemButton> | 
|             </ListItem> | 
|         </Box> | 
|     ) | 
| } | 
|   | 
|   | 
| export default Warehouse; |