| 3719 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { Card, CardActions, CardContent } from '../card';
|
|
|
3 |
import { Avatar, Box, Typography } from '@mui/material';
|
|
|
4 |
|
|
|
5 |
export const GridItem = ({ image, name, email, network, status, renderActions }) => {
|
|
|
6 |
return (
|
|
|
7 |
<Card>
|
|
|
8 |
<CardContent>
|
|
|
9 |
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
|
10 |
<Avatar src={image} alt={name} />
|
|
|
11 |
|
|
|
12 |
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
13 |
<Typography variant='h2'>{name}</Typography>
|
|
|
14 |
{email && <Typography variant='h5'>{email}</Typography>}
|
|
|
15 |
{network && <Typography variant='caption'>{network}</Typography>}
|
|
|
16 |
{status && <Typography variant='caption'>{status}</Typography>}
|
|
|
17 |
</Box>
|
|
|
18 |
</Box>
|
|
|
19 |
</CardContent>
|
|
|
20 |
{renderActions && <CardActions>{renderActions()}</CardActions>}
|
|
|
21 |
</Card>
|
|
|
22 |
);
|
|
|
23 |
};
|