Proyectos de Subversion LeadersLinked - SPA

import React, { useContext } from 'react'
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Button,
  Typography
} from '@mui/material'
import { Add, StarRateRounded, ExpandMore } from '@mui/icons-material'

import { GoalsContext } from '@app/contexts/goals'

import Widget from '@app/components/UI/Widget'
import TagsList from '../UI/TagsList'

export default function Goals() {
  const { goals, toggleModal } = useContext(GoalsContext)

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 2,
          marginBottom: 2
        }}
      >
        <Typography variant='h1'>Metas</Typography>

        <Button onClick={toggleModal}>
          <Add />
          Agregar
        </Button>
      </Box>

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        {goals.map(({ id, title, description, value, finishDate, habits }) => (
          <Widget key={id}>
            <Widget.Body>
              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1,
                  justifyContent: 'space-between'
                }}
              >
                <Typography variant='h3'>{title}</Typography>
                <Typography variant='body2'>
                  <StarRateRounded />
                  {value}
                </Typography>
              </Box>
              <Typography>{description}</Typography>
              <Accordion
                sx={{
                  backgroundColor: 'transparent',
                  boxShadow: 'none',
                  margin: '0 !important',
                  '&::before': {
                    height: 0
                  }
                }}
              >
                <AccordionSummary
                  expandIcon={<ExpandMore />}
                  disableRipple
                  sx={{
                    minHeight: 'auto !important',
                    padding: '0 1rem',
                    '& .MuiAccordionSummary-content': {
                      margin: '0 !important'
                    }
                  }}
                >
                  <Typography variant='h3'>Habitos</Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <TagsList tags={habits} />
                </AccordionDetails>
              </Accordion>
            </Widget.Body>
          </Widget>
        ))}
      </Box>
    </>
  )
}