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,
2605 stevensc 27 
          marginBottom: 1,
28 
          paddingX: 1
2527 stevensc 29 
        }}
30 
      >
31 
        <Typography variant='h1'>Habitos</Typography>
32 
 
33 
        <Button onClick={toggleModal}>
34 
          <Add />
35 
          Agregar
36 
        </Button>
37 
      </Box>
38 
 
39 
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
2543 stevensc 40 
        {habits.map(
41 
          ({
42 
            id,
43 
            name,
44 
            description,
45 
            action = {
46 
              frequency: 'Diariamente'
47 
            },
48 
            method = {
49 
              type: 'video',
50 
              content: 'https://example.com/ejercicio-diario.mp4'
51 
            },
52 
            goal = {
53 
              amount: 30 // minutos de ejercicio diario
54 
            }
55 
          }) => (
56 
            <Widget key={id}>
57 
              <Widget.Body>
58 
                <Box
2527 stevensc 59 
                  sx={{
2543 stevensc 60 
                    display: 'flex',
61 
                    alignItems: 'center',
62 
                    gap: 1,
63 
                    justifyContent: 'space-between'
2527 stevensc 64 
                  }}
65 
                >
2543 stevensc 66 
                  <Typography variant='h3'>{name}</Typography>
67 
                  <Typography variant='body2'>
68 
                    <StarRateRounded />
69 
                    {goal.amount}
70 
                  </Typography>
71 
                </Box>
72 
                <Typography>{description}</Typography>
73 
                <Typography variant='body2'>{action.frequency}</Typography>
2562 stevensc 74 
 
75 
                <Accordion
76 
                  sx={{
77 
                    display: method.content ? 'block' : 'none',
78 
                    backgroundColor: 'transparent',
79 
                    boxShadow: 'none',
80 
                    margin: '0 !important',
81 
                    '&::before': {
82 
                      height: 0
83 
                    }
84 
                  }}
85 
                >
86 
                  <AccordionSummary
87 
                    expandIcon={<ExpandMore />}
88 
                    disableRipple
89 
                    sx={{
90 
                      minHeight: 'auto !important',
91 
                      padding: '0 1rem',
92 
                      '& .MuiAccordionSummary-content': {
93 
                        margin: '0 !important'
94 
                      }
95 
                    }}
96 
                  >
97 
                    <Typography variant='h3'>Método</Typography>
98 
                  </AccordionSummary>
99 
                  <AccordionDetails>
100 
                    <Widget.Media src={method.content} alt={name} />
101 
                  </AccordionDetails>
102 
                </Accordion>
2543 stevensc 103 
              </Widget.Body>
104 
            </Widget>
105 
          )
106 
        )}
2527 stevensc 107 
      </Box>
108 
    </>
109 
  )
110 
}