| 3550 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { Box, Typography } from '@mui/material';
|
|
|
3 |
|
|
|
4 |
import { Card, CardContent, CardHeader, CardMedia } from '@shared/components';
|
|
|
5 |
import { TopicProgress } from '.';
|
|
|
6 |
|
|
|
7 |
export function CapsuleItem({ capsule: { name, image, progress } }) {
|
|
|
8 |
return (
|
|
|
9 |
<Card>
|
|
|
10 |
<CardHeader title={name} />
|
|
|
11 |
<CardMedia src={image} />
|
|
|
12 |
|
|
|
13 |
<CardContent>
|
|
|
14 |
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
|
15 |
<TopicProgress variant='determinate' value={progress} />
|
|
|
16 |
<Typography variant='caption'>{`${progress}%`}</Typography>
|
|
|
17 |
</Box>
|
|
|
18 |
</CardContent>
|
|
|
19 |
</Card>
|
|
|
20 |
);
|
|
|
21 |
}
|