Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import {
  Avatar,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  CardMedia,
  IconButton,
  Menu,
  MenuItem,
  styled
} from '@mui/material'
import { MoreVert } from '@mui/icons-material'

const WidgetContainer = styled(Card)(({ theme }) => ({
  backgroundColor: theme.palette.background.default,
  boxShadow: theme.shadows[1],
  height: 'fit-content',
  position: 'relative',
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    borderRadius: theme.shape.borderRadius
  }
}))

export function Widget({ children, styles, ...props }) {
  return (
    <WidgetContainer sx={styles} {...props}>
      {children}
    </WidgetContainer>
  )
}

export function WidgetHeader({
  title = '',
  subheader = '',
  avatar = '',
  options = [],
  ...props
}) {
  const [anchorEl, setAnchorEl] = useState(null)
  const open = Boolean(anchorEl)

  const handleClick = (event) => setAnchorEl(event.currentTarget)

  const handleClose = () => setAnchorEl(null)

  return (
    <CardHeader
      avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
      action={
        <>
          <IconButton
            id='settings-button'
            aria-controls={open ? 'settings-menu' : undefined}
            aria-haspopup='true'
            aria-expanded={open ? 'true' : undefined}
            onClick={handleClick}
            sx={{
              display: options.length > 0 ? 'block' : 'none'
            }}
          >
            <MoreVert />
          </IconButton>
          <Menu
            id='settings-menu'
            aria-labelledby='settings-button'
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'left'
            }}
            transformOrigin={{
              vertical: 'top',
              horizontal: 'left'
            }}
          >
            {options.map((option, index) => (
              <MenuItem
                key={index}
                onClick={() => {
                  option.action()
                  handleClose()
                }}
              >
                {option.label}
              </MenuItem>
            ))}
          </Menu>
        </>
      }
      title={title}
      subheader={subheader}
      titleTypographyProps={{
        sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
      }}
      subheaderTypographyProps={{
        sx: { fontSize: '14px', color: 'var(--subtitle-color)' }
      }}
      {...props}
    />
  )
}

export function WidgetBody({ children, ...props }) {
  return <CardContent {...props}>{children}</CardContent>
}

export function WidgetActions({ children, ...props }) {
  return (
    <CardActions disableSpacing {...props}>
      {children}
    </CardActions>
  )
}

export function WidgetMedia({
  src = '',
  height = 200,
  width = 200,
  alt = '',
  component = 'img',
  ...props
}) {
  return (
    <CardMedia
      alt={alt}
      component={component}
      height={height}
      image={src}
      width={width}
      {...props}
    />
  )
}

Widget.Header = WidgetHeader
Widget.Body = WidgetBody
Widget.Actions = WidgetActions
Widget.Media = WidgetMedia

export default Widget