|  |  | 
 |  |  | } from 'react-admin'; | 
 |  |  | import PulseSignal from '../components/PulseSignal'; | 
 |  |  | import { AgvAvatar } from './AgvAvatar'; | 
 |  |  | import { red, blue } from '@mui/material/colors'; | 
 |  |  | import { red, blue, blueGrey } from '@mui/material/colors'; | 
 |  |  |  | 
 |  |  | export const AgvCard = (props) => { | 
 |  |  |     const resource = useResourceContext(); | 
 |  |  | 
 |  |  |                     justifyContent: 'space-between', | 
 |  |  |                     padding: '1em', | 
 |  |  |                     ...(!record.online && { | 
 |  |  |                         animation: 'pulse 2s infinite', | 
 |  |  |                         '@keyframes pulse': { | 
 |  |  |                         animation: 'cardBorderPulse 2s infinite', | 
 |  |  |                         '@keyframes cardBorderPulse': { | 
 |  |  |                             '0%': { | 
 |  |  |                                 boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)', | 
 |  |  |                             }, | 
 |  |  | 
 |  |  |                     <Avatar | 
 |  |  |                         key={record.id} | 
 |  |  |                         title={`${record.seqNum}`} | 
 |  |  |                         sx={{ bgcolor: blue[300] }} | 
 |  |  |                         sx={{ bgcolor: blueGrey[500] }} | 
 |  |  |                     > | 
 |  |  |                         {record.seqNum.slice(0, 4)} | 
 |  |  |                     </Avatar> |