Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, Typography } from '@mui/material';

import { Card, CardContent, CardHeader, CardMedia } from '@shared/components';
import { TopicProgress } from '.';

export function CapsuleItem({ capsule: { name, image, progress } }) {
  return (
    <Card>
      <CardHeader title={name} />
      <CardMedia src={image} />

      <CardContent>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <TopicProgress variant='determinate' value={progress} />
          <Typography variant='caption'>{`${progress}%`}</Typography>
        </Box>
      </CardContent>
    </Card>
  );
}