|  |  | 
 |  |  |     const createPath = useCreatePath(); | 
 |  |  |     const record = useRecordContext(props); | 
 |  |  |     if (!record) return null; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Link | 
 |  |  |             to={createPath({ | 
 |  |  | 
 |  |  |                     flexDirection: 'column', | 
 |  |  |                     justifyContent: 'space-between', | 
 |  |  |                     padding: '1em', | 
 |  |  |                     ...(!record.online && { | 
 |  |  |                         animation: 'cardBorderPulse 2s infinite', | 
 |  |  |                         '@keyframes cardBorderPulse': { | 
 |  |  |                             '0%': { | 
 |  |  |                                 boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)', | 
 |  |  |                             }, | 
 |  |  |                             '50%': { | 
 |  |  |                                 boxShadow: '0 0 3px 2px rgba(255, 0, 0, 0.3)', | 
 |  |  |                             }, | 
 |  |  |                             '100%': { | 
 |  |  |                                 boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)', | 
 |  |  |                             }, | 
 |  |  |                         }, | 
 |  |  |                     }) | 
 |  |  |                 }} | 
 |  |  |                 elevation={elevation} | 
 |  |  |             > |