Rev 3508 | Rev 3533 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react';
import { useParams } from 'react-router-dom';
import { Button, styled, Typography } from '@mui/material';
import { useCapsule } from '@microlearning/hooks';
import { parse } from '@shared/utils';
import { Card, CardContent, CommentForm, CommentsList, Spinner } from '@shared/components';
const Picture = styled('img')`
width: 100%;
height: 250px;
border-radius: 10px;
background-color: #0009;
object-fit: contain;
margin-bottom: 1rem;
`;
export function CapsulePage() {
const { uuid } = useParams();
const { capsule, loading } = useCapsule(uuid);
/* const getSlides = async () => {
try {
const slides = await getSlide(capsule.link_first_slide);
} catch (error) {
addNotification({ style: 'danger', msg: error.message });
}
};
const handleStart = async () => {
capsule?.total_slides === 1 && capsule?.type_first_slide === 'video'
? getSlides()
: navigate('slides');
}; */
if (loading || !capsule) return <Spinner />;
return (
<>
<Picture src={capsule.image} alt={`${capsule.name} capsule`} />
<Card>
<CardContent>
<Typography variant='h1'>{capsule.name}</Typography>
<Typography>{parse(capsule.description)}</Typography>
<CommentForm />
<CommentsList />
</CardContent>
</Card>
<Button color='primary'>Comenzar</Button>
</>
);
}