| 3550 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { Avatar, Box, Typography } from '@mui/material';
|
|
|
3 |
|
|
|
4 |
import { parse } from '@utils';
|
|
|
5 |
|
|
|
6 |
import { Card, CardContent } from '@shared/components';
|
|
|
7 |
import { CapsuleRating } from '.';
|
|
|
8 |
|
|
|
9 |
export function CapsuleDetail({
|
|
|
10 |
capsule: { name, description, image, total_rating },
|
|
|
11 |
readOnly = false
|
|
|
12 |
}) {
|
|
|
13 |
const totalRating = Number(total_rating);
|
|
|
14 |
return (
|
|
|
15 |
<Card>
|
|
|
16 |
<CardContent>
|
|
|
17 |
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
|
18 |
<Avatar sx={{ width: 60, height: 60 }} src={image} />
|
|
|
19 |
|
|
|
20 |
<Box>
|
|
|
21 |
<Typography variant='h2'>{name}</Typography>
|
|
|
22 |
<Typography>{parse(description)}</Typography>
|
|
|
23 |
<CapsuleRating readOnly={readOnly} defaultValue={totalRating} sx={{ mt: 0.5 }} />
|
|
|
24 |
</Box>
|
|
|
25 |
</Box>
|
|
|
26 |
</CardContent>
|
|
|
27 |
</Card>
|
|
|
28 |
);
|
|
|
29 |
}
|