Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Autoría | Ultima modificación | Ver Log |

import React from 'react'
import {
  Card,
  CardActions,
  CardContent,
  CardMedia,
  IconButton,
  Typography,
} from '@mui/material'
import { Delete, Edit } from '@mui/icons-material'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const KnowledgeCard = styled(Card)`
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: fit-content;
`

const KnowledgeItem = ({
  link_delete,
  link_view,
  link_edit,
  category,
  description,
  image,
  title,
  onEdit,
  onDelete,
}) => {
  return (
    <KnowledgeCard>
      <CardMedia
        component="img"
        height="194"
        image={image}
        alt={`${title} image`}
      />
      <CardContent>
        <Link to={link_view}>
          <Typography variant="h5">{title}</Typography>
        </Link>
        <Typography variant="subtitle1" color="text.secondary">
          {category}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {description}
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        {link_edit && (
          <IconButton aria-label="edit" onClick={() => onEdit(link_edit)}>
            <Edit />
          </IconButton>
        )}
        {link_delete && (
          <IconButton aria-label="delete" onClick={() => onDelete(link_delete)}>
            <Delete />
          </IconButton>
        )}
      </CardActions>
    </KnowledgeCard>
  )
}

export default KnowledgeItem