Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useParams } from 'react-router-dom';
import { Box, 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`}
        sx={{
          aspectRatio: 1 / 0.5,
          objectFit: 'contain',
          objectPosition: 'center'
        }}
      />
      <CardContent>
        <Typography variant='h1'>{capsule.name}</Typography>
        <Typography>{parse(capsule.description)}</Typography>

        <Box sx={{ mt: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
          <CommentForm />
          <CommentsList comments={capsule.comments} />
        </Box>
      </CardContent>
    </Card>
  );
}