Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

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

import { NavigateNext } from '@mui/icons-material';

import { parse } from '@utils';

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

const CardImage = styled('img')(({ theme }) => ({

  borderRadius: theme.shape.borderRadius,

  maxWidth: 100,

  aspectRatio: '1/1.5',

  objectFit: 'cover'

}));

export function CapsuleCard({ capsule: { name, description, image, completed, uuid } }) {

  return (

    <Card>

      <CardContent>

        <Box

          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 0.5 }}

        >

          <Box>

            <Typography variant='caption'>{completed ? 'Completa' : 'En curso'}</Typography>

            <Typography variant='h2'>{name}</Typography>

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

            <Button LinkComponent={Link} to={`/microlearning/capsules/${uuid}/slides`}>

              Ver cápsula

              <NavigateNext fontSize='small' />

            </Button>

          </Box>

          <CardImage src={image} alt={name} />

        </Box>

      </CardContent>

    </Card>

  );

}