Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

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

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

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

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

import CapsuleDetails from '@microlearning/components/CapsuleDetails';

const Picture = styled('img')`

  width: 100%;

  height: 250px;

  border-radius: 10px;

  background-color: #858585;

  margin-bottom: 1rem;

`;

export function CapsulePage() {

  const [section, setSection] = useState('');

  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');

  }; */

  const handleChange = (event, newValue) => {

    setSection(newValue);

  };

  if (loading) return <Spinner />;

  return (

    <>

      <Picture src={capsule.image} alt={`${capsule.name} capsule`} />

      <Tabs value={section} onChange={handleChange}>

        <Tab label='Información' value='details' />

        <Tab label='Contenido' value='comments' />

        <Tab label='Contenido' value='comment' />

      </Tabs>

      {section === 'details' && <CapsuleDetails />}

      {section === 'comments' && <CommentsList comments={capsule.comments} />}

      {section === 'comment' && <CommentForm />}

      <Button color='primary'>Comenzar</Button>

    </>

  );

}