Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { IconButton, Menu, MenuItem, styled, Typography } from '@mui/material';
import { MoreVert } from '@mui/icons-material';

import { parse } from '@app/utils';

import { Card, CardContent, CardMedia } from '@shared/components';

const OptionsButton = styled(IconButton)(({ theme }) => ({
  position: 'absolute',
  top: theme.spacing(1),
  right: theme.spacing(1),
  zIndex: 1
}));

export function KnowledgeCard({
  knowledge: { category, description, image, title },
  onClick,
  onEdit,
  onDelete
}) {
  const labels = useSelector(({ intl }) => intl.labels);
  const [anchorEl, setAnchorEl] = useState();
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };

  const handleClose = (event) => {
    event.stopPropagation();
    setAnchorEl(null);
  };

  const handleMenuItemClick = (onClick, event) => {
    event.stopPropagation();
    handleClose();
    onClick();
  };

  return (
    <Card onClick={onClick} styles={{ cursor: 'pointer' }}>
      <OptionsButton onClick={handleClick}>
        <MoreVert />
      </OptionsButton>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left'
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right'
        }}
      >
        <MenuItem onClick={(event) => handleMenuItemClick(onEdit, event)}>{labels.edit}</MenuItem>
        <MenuItem onClick={(event) => handleMenuItemClick(onDelete, event)}>
          {labels.delete}
        </MenuItem>
      </Menu>

      <CardMedia height={200} src={image} alt={`${title} image`} />

      <CardContent>
        <Typography variant='h2'>{title}</Typography>
        <Typography variant='overline'>{category}</Typography>
        <Typography>{parse(description)}</Typography>
      </CardContent>
    </Card>
  );
}