Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useParams } from 'react-router-dom';

import { Button, styled, Typography } from '@mui/material';

import { useCapsule } from '@microlearning/hooks';

import { Card, CardContent, CommentForm, CommentsList, Spinner } from '@shared/components';

import { parse } from '@utils';

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>

    </>

  );

}