Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2527 stevensc 1 
import React, { useContext } from 'react'
2562 stevensc 2 
import {
3 
  Accordion,
4 
  AccordionDetails,
5 
  AccordionSummary,
6 
  Box,
7 
  Button,
8 
  Typography
9 
} from '@mui/material'
10 
import { Add, StarRateRounded, ExpandMore } from '@mui/icons-material'
2527 stevensc 11 
 
12 
import { HabitsContext } from '@app/contexts/habits'
13 
 
14 
import Widget from '@app/components/UI/Widget'
15 
 
16 
export default function Habits() {
17 
  const { habits, toggleModal } = useContext(HabitsContext)
18 
 
19 
  return (
20 
    <>
21 
      <Box
22 
        sx={{
23 
          display: 'flex',
24 
          justifyContent: 'space-between',
25 
          alignItems: 'center',
26 
          gap: 2,
27 
          marginBottom: 2
28 
        }}
29 
      >
30 
        <Typography variant='h1'>Habitos</Typography>
31 
 
32 
        <Button onClick={toggleModal}>
33 
          <Add />
34 
          Agregar
35 
        </Button>
36 
      </Box>
37 
 
38 
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
2543 stevensc 39 
        {habits.map(
40 
          ({
41 
            id,
42 
            name,
43 
            description,
44 
            action = {
45 
              frequency: 'Diariamente'
46 
            },
47 
            method = {
48 
              type: 'video',
49 
              content: 'https://example.com/ejercicio-diario.mp4'
50 
            },
51 
            goal = {
52 
              amount: 30 // minutos de ejercicio diario
53 
            }
54 
          }) => (
55 
            <Widget key={id}>
56 
              <Widget.Body>
57 
                <Box
2527 stevensc 58 
                  sx={{
2543 stevensc 59 
                    display: 'flex',
60 
                    alignItems: 'center',
61 
                    gap: 1,
62 
                    justifyContent: 'space-between'
2527 stevensc 63 
                  }}
64 
                >
2543 stevensc 65 
                  <Typography variant='h3'>{name}</Typography>
66 
                  <Typography variant='body2'>
67 
                    <StarRateRounded />
68 
                    {goal.amount}
69 
                  </Typography>
70 
                </Box>
71 
                <Typography>{description}</Typography>
72 
                <Typography variant='body2'>{action.frequency}</Typography>
2562 stevensc 73 
 
74 
                <Accordion
75 
                  sx={{
76 
                    display: method.content ? 'block' : 'none',
77 
                    backgroundColor: 'transparent',
78 
                    boxShadow: 'none',
79 
                    margin: '0 !important',
80 
                    '&::before': {
81 
                      height: 0
82 
                    }
83 
                  }}
84 
                >
85 
                  <AccordionSummary
86 
                    expandIcon={<ExpandMore />}
87 
                    disableRipple
88 
                    sx={{
89 
                      minHeight: 'auto !important',
90 
                      padding: '0 1rem',
91 
                      '& .MuiAccordionSummary-content': {
92 
                        margin: '0 !important'
93 
                      }
94 
                    }}
95 
                  >
96 
                    <Typography variant='h3'>Método</Typography>
97 
                  </AccordionSummary>
98 
                  <AccordionDetails>
99 
                    <Widget.Media src={method.content} alt={name} />
100 
                  </AccordionDetails>
101 
                </Accordion>
2543 stevensc 102 
              </Widget.Body>
103 
            </Widget>
104 
          )
105 
        )}
2527 stevensc 106 
      </Box>
107 
    </>
108 
  )
109 
}