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