Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2510 stevensc 1 
import React, { useContext } from 'react'
2515 stevensc 2 
import {
3 
  Accordion,
4 
  AccordionDetails,
5 
  AccordionSummary,
6 
  Box,
7 
  Button,
8 
  Typography
9 
} from '@mui/material'
2516 stevensc 10 
import { Add, StarRateRounded, ExpandMore } from '@mui/icons-material'
2508 stevensc 11 
 
12 
import { GoalsContext } from '@app/contexts/goals'
2515 stevensc 13 
 
2508 stevensc 14 
import Widget from '@app/components/UI/Widget'
2515 stevensc 15 
import TagsList from '../UI/TagsList'
2508 stevensc 16 
 
17 
export default function Goals() {
18 
  const { goals, toggleModal } = useContext(GoalsContext)
19 
 
2509 stevensc 20 
  return (
21 
    <>
2510 stevensc 22 
      <Box
23 
        sx={{
24 
          display: 'flex',
25 
          justifyContent: 'space-between',
26 
          alignItems: 'center',
2512 stevensc 27 
          gap: 2,
28 
          marginBottom: 2
2510 stevensc 29 
        }}
30 
      >
2512 stevensc 31 
        <Typography variant='h1'>Metas</Typography>
2508 stevensc 32 
 
2510 stevensc 33 
        <Button onClick={toggleModal}>
34 
          <Add />
35 
          Agregar
36 
        </Button>
37 
      </Box>
38 
 
2511 stevensc 39 
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
40 
        {goals.map(({ id, title, description, value, finishDate, habits }) => (
41 
          <Widget key={id}>
42 
            <Widget.Body>
2512 stevensc 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>
2511 stevensc 57 
              <Typography>{description}</Typography>
2516 stevensc 58 
              <Accordion
59 
                sx={{
60 
                  backgroundColor: 'transparent',
61 
                  boxShadow: 'none',
2519 stevensc 62 
                  margin: '0 !important',
63 
                  '&::before': {
64 
                    height: 0
65 
                  }
2516 stevensc 66 
                }}
67 
              >
2517 stevensc 68 
                <AccordionSummary
69 
                  expandIcon={<ExpandMore />}
70 
                  disableRipple
2518 stevensc 71 
                  sx={{
72 
                    minHeight: 'auto !important',
73 
                    padding: '0 1rem',
2519 stevensc 74 
                    '& .MuiAccordionSummary-content': {
2518 stevensc 75 
                      margin: '0 !important'
76 
                    }
77 
                  }}
2517 stevensc 78 
                >
2526 stevensc 79 
                  <Typography variant='h3'>Habitos</Typography>
2515 stevensc 80 
                </AccordionSummary>
81 
                <AccordionDetails>
82 
                  <TagsList tags={habits} />
83 
                </AccordionDetails>
84 
              </Accordion>
2511 stevensc 85 
            </Widget.Body>
86 
          </Widget>
87 
        ))}
88 
      </Box>
2508 stevensc 89 
    </>
90 
  )
91 
}