Styled Table Cell - Copy this React, Mui Component to your project

Can you do the same following this Farm order and architecture? <Box sx={{ flex: 1, overflowY: 'auto', gap: 2, display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr 1fr 1fr' }, }} > { data?.map((leg, index) => { const randomNumber = Math.floor(Math.random() * 4); return ( <Card key={index} sx={{ height: 100 }}> <CardContent sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '70%' }}> <Typography variant="h5">{leg.name}</Typography> <Box sx={{ display: 'flex', alignContent: 'center', width: '100%' }}> <Box sx={{ width: '60%' }}> { randomNumber <= 0 && <Chip label={`No hay dispositivos online`} sx={{ backgroundColor: 'text.secondary', color: 'white' }} /> } { randomNumber > 0 && <Chip label={`${randomNumber} dispositivos online`} color="success" /> } </Box> <Box sx={{ width: '40%', maxHeight: '30px', display: 'flex', justifyContent: 'flex-end' }}> <Button sx={{ backgroundColor: 'black', color: 'white' }} onClick={() => handleDialogOpen(leg)} > Ver Parcelas </Button> </Box> </Box> </CardContent> </Card> ); })} </Box>