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 },

  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>

      <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>

  );

}