43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import Card from '@mui/material/Card';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
export interface OnRouteVehiclesProps {
|
|
amount: number;
|
|
}
|
|
|
|
export function OnRouteVehicles({ amount }: OnRouteVehiclesProps): React.JSX.Element {
|
|
return (
|
|
<Card>
|
|
<Stack spacing={1} sx={{ p: 3 }}>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
|
|
<Avatar sx={{ bgcolor: 'transparent' }}>
|
|
<Box
|
|
sx={{
|
|
animation: 'pulse ease 750ms infinite',
|
|
borderRadius: '50%',
|
|
p: '4px',
|
|
'@keyframes pulse': {
|
|
'0%': { boxShadow: 'none' },
|
|
'100%': { boxShadow: '0px 0px 0px 6px rgba(240, 68, 56, 0.1)' },
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{ bgcolor: 'var(--mui-palette-error-main)', borderRadius: '50%', height: '18px', width: '18px' }}
|
|
/>
|
|
</Box>
|
|
</Avatar>
|
|
<Typography variant="h5">{amount}</Typography>
|
|
</Stack>
|
|
<Typography color="text.secondary" variant="body2">
|
|
On route vehicles
|
|
</Typography>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|