Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3239 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3153 stevensc 1 
import React from 'react'
2 
import {
3 
  Accordion,
4 
  AccordionDetails,
5 
  AccordionSummary,
6 
  Box,
7 
  Typography
8 
} from '@mui/material'
9 
import { ExpandMore, StarRateRounded } from '@mui/icons-material'
10 
 
11 
import Widget from '@components/UI/Widget'
12 
 
13 
export default function HabitItem({
14 
  habit: {
15 
    id,
16 
    name,
17 
    description,
18 
    action = {
19 
      frequency: 'Diariamente'
20 
    },
21 
    method = {
22 
      type: 'video',
23 
      content: 'https://example.com/ejercicio-diario.mp4'
24 
    },
25 
    goal = {
26 
      amount: 30 // minutos de ejercicio diario
27 
    }
28 
  }
29 
}) {
30 
  return (
31 
    <Widget>
32 
      <Widget.Body>
33 
        <Box
34 
          sx={{
35 
            display: 'flex',
36 
            alignItems: 'center',
37 
            gap: 1,
38 
            justifyContent: 'space-between'
39 
          }}
40 
        >
41 
          <Typography variant='h3'>{name}</Typography>
42 
          <Typography variant='overline'>
43 
            <StarRateRounded />
44 
            {goal.amount}
45 
          </Typography>
46 
        </Box>
47 
        <Typography>{description}</Typography>
48 
        <Typography variant='overline'>{action.frequency}</Typography>
49 
 
50 
        <Accordion
51 
          sx={{
52 
            display: method.content ? 'block' : 'none',
53 
            backgroundColor: 'transparent',
54 
            boxShadow: 'none',
55 
            margin: '0 !important',
56 
            '&::before': {
57 
              height: 0
58 
            }
59 
          }}
60 
        >
61 
          <AccordionSummary
62 
            expandIcon={<ExpandMore />}
63 
            disableRipple
64 
            sx={{
65 
              minHeight: 'auto !important',
66 
              padding: '0 1rem',
67 
              '& .MuiAccordionSummary-content': {
68 
                margin: '0 !important'
69 
              }
70 
            }}
71 
          >
72 
            <Typography variant='h3'>Método</Typography>
73 
          </AccordionSummary>
74 
          <AccordionDetails>
75 
            <Widget.Media src={method.content} alt={name} />
76 
          </AccordionDetails>
77 
        </Accordion>
78 
      </Widget.Body>
79 
    </Widget>
80 
  )
81 
}