Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1753 | Rev 2917 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1751 stevensc 1 
import React, { useState } from 'react'
1750 stevensc 2 
import {
3 
  Avatar,
4 
  Button,
5 
  Card,
6 
  CardActions,
7 
  CardContent,
8 
  CardHeader,
9 
  Collapse,
10 
  Typography
11 
} from '@mui/material'
12 
 
13 
export default function ReportCard({ report }) {
14 
  const {
15 
    first_name = '',
16 
    last_name = '',
17 
    email = '',
18 
    image = '',
19 
    status = '',
20 
    reason = '',
21 
    type = '',
22 
    commet = '',
23 
    review = null,
24 
    date = ''
25 
  } = report
26 
  const [expanded, setExpanded] = useState(false)
27 
 
28 
  const handleExpandClick = () => {
29 
    setExpanded(!expanded)
30 
  }
31 
 
32 
  return (
1752 stevensc 33 
    <Card sx={{ maxWidth: 345, margin: '0 auto' }}>
1750 stevensc 34 
      <CardHeader
35 
        avatar={<Avatar src={image} alt={name} />}
36 
        title={`${first_name} ${last_name}`}
37 
        subheader={date}
1751 stevensc 38 
        sx={{ p: 1 }}
1750 stevensc 39 
      />
40 
 
1752 stevensc 41 
      <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
1751 stevensc 42 
        <Typography paragraph>
43 
          <Typography variant='body2'>Tipo: </Typography>
44 
          {type}
45 
        </Typography>
46 
        <Typography paragraph>
47 
          <Typography variant='body2'>Motivo: </Typography>
48 
          {reason}
49 
        </Typography>
50 
        <Typography paragraph>
51 
          <Typography variant='body2'>Estatus: </Typography>
52 
          {status}
53 
        </Typography>
54 
        <Typography paragraph>
55 
          <Typography variant='body2'>Email: </Typography>
56 
          {email}
57 
        </Typography>
1750 stevensc 58 
      </CardContent>
59 
 
1751 stevensc 60 
      <CardActions sx={{ p: 1 }}>
61 
        <Button variant='tertiary' size='small' onClick={handleExpandClick}>
1750 stevensc 62 
          Detalles
63 
        </Button>
64 
      </CardActions>
65 
 
66 
      <Collapse in={expanded} timeout='auto' unmountOnExit>
1752 stevensc 67 
        <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
1753 stevensc 68 
          <Typography variant='body2'>Comentario:</Typography>
1750 stevensc 69 
          <Typography paragraph>{commet}</Typography>
1754 stevensc 70 
          {review && (
71 
            <>
72 
              <Typography variant='body2'>Revisión:</Typography>
73 
              <Typography paragraph>{review}</Typography>
74 
            </>
75 
          )}
1750 stevensc 76 
        </CardContent>
77 
      </Collapse>
78 
    </Card>
79 
  )
80 
}