Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState } from 'react'

import {

  Accordion,

  AccordionDetails,

  AccordionSummary,

  Box,

  Checkbox,

  IconButton,

  Menu,

  MenuItem,

  Typography

} from '@mui/material'

import {

  MoreVert,

  RadioButtonUnchecked,

  CheckCircle,

  ArrowDropDown

} from '@mui/icons-material'

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

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

export default function GoalCard({ goal }) {

  const [showAction, setShowActions] = useState(false)

  const actionsEl = useRef()

  const { title, description, habits } = goal

  const toggleActions = () => setShowActions(!showAction)

  return (

    <Widget>

      <Widget.Body>

        <Box

          sx={{

            display: 'flex',

            gap: 0.5

          }}

        >

          <Box>

            <Checkbox

              edge='start'

              icon={<RadioButtonUnchecked />}

              checkedIcon={<CheckCircle color='success' />}

              disableRipple

              sx={{ borderRadius: '50px' }}

            />

          </Box>

          <Box flexGrow='1'>

            <Typography variant='h2'>{title}</Typography>

            <Typography>{description}</Typography>

            <Accordion

              sx={{ backgroundColor: 'transparent', boxShadow: 'none' }}

            >

              <AccordionSummary

                expandIcon={<ArrowDropDown />}

                sx={{ padding: 1 }}

              >

                <Typography variant='h3'>Hábitos:</Typography>

              </AccordionSummary>

              <AccordionDetails sx={{ padding: 0 }}>

                <TagsList tags={habits} />

              </AccordionDetails>

            </Accordion>

          </Box>

          <Box>

            <IconButton

              id='goal-button'

              aria-controls={showAction ? 'goal-menu' : undefined}

              aria-haspopup='true'

              aria-expanded={showAction ? 'true' : undefined}

              onClick={toggleActions}

              ref={actionsEl}

            >

              <MoreVert />

            </IconButton>

            <Menu

              id='goal-menu'

              anchorEl={actionsEl.current}

              open={showAction}

              onClose={toggleActions}

              MenuListProps={{

                'aria-labelledby': 'goal-button'

              }}

              anchorOrigin={{

                vertical: 'bottom',

                horizontal: 'left'

              }}

              transformOrigin={{

                vertical: 'top',

                horizontal: 'left'

              }}

            >

              <MenuItem onClick={() => toggleActions()}>Agregar</MenuItem>

            </Menu>

          </Box>

        </Box>

      </Widget.Body>

    </Widget>

  )

}