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'
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'
11 
 
12 
import { HabitsContext } from '@app/contexts/habits'
13 
 
14 
import Widget from '@app/components/UI/Widget'
15 
import TagsList from '../UI/TagsList'
16 
 
17 
export default function Habits() {
18 
  const { habits, toggleModal } = useContext(HabitsContext)
19 
 
20 
  return (
21 
    <>
22 
      <Box
23 
        sx={{
24 
          display: 'flex',
25 
          justifyContent: 'space-between',
26 
          alignItems: 'center',
27 
          gap: 2,
28 
          marginBottom: 2
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 }}>
40 
        {habits.map(({ id, title, description, value, finishDate, habits }) => (
41 
          <Widget key={id}>
42 
            <Widget.Body>
43 
              <Box
44 
                sx={{
45 
                  display: 'flex',
46 
                  alignItems: 'center',
47 
                  gap: 1,
48 
                  justifyContent: 'space-between'
49 
                }}
50 
              >
51 
                <Typography variant='h3'>{title}</Typography>
52 
                <Typography variant='body2'>
53 
                  <StarRateRounded />
54 
                  {value}
55 
                </Typography>
56 
              </Box>
57 
              <Typography>{description}</Typography>
58 
              <Accordion
59 
                sx={{
60 
                  backgroundColor: 'transparent',
61 
                  boxShadow: 'none',
62 
                  margin: '0 !important',
63 
                  '&::before': {
64 
                    height: 0
65 
                  }
66 
                }}
67 
              >
68 
                <AccordionSummary
69 
                  expandIcon={<ExpandMore />}
70 
                  disableRipple
71 
                  sx={{
72 
                    minHeight: 'auto !important',
73 
                    padding: '0 1rem',
74 
                    '& .MuiAccordionSummary-content': {
75 
                      margin: '0 !important'
76 
                    }
77 
                  }}
78 
                >
79 
                  <Typography variant='h3'>Habitos</Typography>
80 
                </AccordionSummary>
81 
                <AccordionDetails>
82 
                  <TagsList tags={habits} />
83 
                </AccordionDetails>
84 
              </Accordion>
85 
            </Widget.Body>
86 
          </Widget>
87 
        ))}
88 
      </Box>
89 
    </>
90 
  )
91 
}