3719 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { useNavigate } from 'react-router-dom';
|
|
|
3 |
import { Typography } from '@mui/material';
|
|
|
4 |
|
|
|
5 |
import { parse } from '@shared/utils';
|
|
|
6 |
|
|
|
7 |
import { Card, CardContent, CardHeader, CardMedia, Menu } from '@shared/components';
|
|
|
8 |
|
|
|
9 |
export function KnowledgeCard({ knowledge, onEdit, onDelete }) {
|
|
|
10 |
const { link_view, link_edit, link_delete, image, title, category, description } = knowledge;
|
|
|
11 |
const navigate = useNavigate();
|
|
|
12 |
|
|
|
13 |
return (
|
|
|
14 |
<Card onClick={() => navigate(link_view)} sx={{ cursor: 'pointer' }}>
|
|
|
15 |
<CardHeader
|
|
|
16 |
renderAction={() => (
|
|
|
17 |
<Menu>
|
|
|
18 |
{link_edit && <Menu.Item onClick={() => onEdit(knowledge)}>Editar</Menu.Item>}
|
|
|
19 |
{link_delete && <Menu.Item onClick={() => onDelete(link_delete)}>Eliminar</Menu.Item>}
|
|
|
20 |
</Menu>
|
|
|
21 |
)}
|
|
|
22 |
/>
|
|
|
23 |
|
|
|
24 |
<CardMedia height={200} src={image} alt={`${title} image`} />
|
|
|
25 |
|
|
|
26 |
<CardContent>
|
|
|
27 |
<Typography variant='h2'>{title}</Typography>
|
|
|
28 |
<Typography variant='overline'>{category}</Typography>
|
|
|
29 |
<Typography>{parse(description)}</Typography>
|
|
|
30 |
</CardContent>
|
|
|
31 |
</Card>
|
|
|
32 |
);
|
|
|
33 |
}
|