Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import { Typography } from '@mui/material';

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

import { parse } from '@shared/utils';

import {

  Card,

  CardContent,

  CardMedia,

  CommentForm,

  CommentsList,

  Spinner

} from '@shared/components';

export function CapsulePage() {

  const { uuid } = useParams();

  const { capsule, loading } = useCapsule(uuid);

  if (loading || !capsule) return <Spinner />;

  return (

    <Card>

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

      <CardContent>

        <Typography variant='h1'>{capsule.name}</Typography>

        <Typography>{parse(capsule.description)}</Typography>

        <CommentForm />

        <CommentsList />

      </CardContent>

    </Card>

  );

}