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 { 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>
    </>
  );
}