Rev 3667 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Typography } from '@mui/material';
import { parse } from '@shared/utils';
import { Card, CardContent, CardHeader, CardMedia, Menu } from '@shared/components';
export function KnowledgeCard({ knowledge, onEdit, onDelete }) {
const { link_view, link_edit, link_delete, image, title, category, description } = knowledge;
const navigate = useNavigate();
return (
<Card onClick={() => navigate(link_view)} sx={{ cursor: 'pointer' }}>
<CardHeader
renderAction={() => (
<Menu>
{link_edit && <Menu.Item onClick={() => onEdit(knowledge)}>Editar</Menu.Item>}
{link_delete && <Menu.Item onClick={() => onDelete(link_delete)}>Eliminar</Menu.Item>}
</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>
);
}