125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import ButtonBase from '@mui/material/ButtonBase';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import Rating from '@mui/material/Rating';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import type { IProductReview } from 'src/types/party-event';
|
|
import { fDate } from 'src/utils/format-time';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = {
|
|
review: IProductReview;
|
|
};
|
|
|
|
export function ProductReviewItem({ review }: Props) {
|
|
const renderInfo = () => (
|
|
<Box
|
|
sx={{
|
|
gap: 2,
|
|
display: 'flex',
|
|
width: { md: 240 },
|
|
alignItems: 'center',
|
|
textAlign: { md: 'center' },
|
|
flexDirection: { xs: 'row', md: 'column' },
|
|
}}
|
|
>
|
|
<Avatar
|
|
src={review.avatarUrl}
|
|
sx={{ width: { xs: 48, md: 64 }, height: { xs: 48, md: 64 } }}
|
|
/>
|
|
|
|
<ListItemText
|
|
primary={review.name}
|
|
secondary={fDate(review.postedAt)}
|
|
slotProps={{
|
|
primary: { noWrap: true },
|
|
secondary: {
|
|
noWrap: true,
|
|
sx: { mt: 0.5, typography: 'caption' },
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
|
|
const renderContent = () => (
|
|
<Box
|
|
sx={{
|
|
gap: 1,
|
|
display: 'flex',
|
|
flex: '1 1 auto',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<Rating size="small" value={review.rating} precision={0.1} readOnly />
|
|
|
|
{review.isPurchased && (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
color: 'success.main',
|
|
typography: 'caption',
|
|
}}
|
|
>
|
|
<Iconify icon="solar:verified-check-bold" width={16} sx={{ mr: 0.5 }} />
|
|
Verified purchase
|
|
</Box>
|
|
)}
|
|
|
|
<Typography variant="body2">{review.comment}</Typography>
|
|
|
|
{!!review.attachments?.length && (
|
|
<Box
|
|
sx={{
|
|
pt: 1,
|
|
gap: 1,
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
}}
|
|
>
|
|
{review.attachments.map((attachment) => (
|
|
<Box
|
|
key={attachment}
|
|
component="img"
|
|
alt={attachment}
|
|
src={attachment}
|
|
sx={{ width: 64, height: 64, borderRadius: 1.5 }}
|
|
/>
|
|
))}
|
|
</Box>
|
|
)}
|
|
|
|
<Box sx={{ gap: 2, pt: 1.5, display: 'flex' }}>
|
|
<ButtonBase disableRipple sx={{ gap: 0.5, typography: 'caption' }}>
|
|
<Iconify icon="solar:like-outline" width={16} />
|
|
123
|
|
</ButtonBase>
|
|
|
|
<ButtonBase disableRipple sx={{ gap: 0.5, typography: 'caption' }}>
|
|
<Iconify icon="solar:dislike-outline" width={16} />
|
|
34
|
|
</ButtonBase>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
mt: 5,
|
|
gap: 2,
|
|
display: 'flex',
|
|
px: { xs: 2.5, md: 0 },
|
|
flexDirection: { xs: 'column', md: 'row' },
|
|
}}
|
|
>
|
|
{renderInfo()}
|
|
{renderContent()}
|
|
</Box>
|
|
);
|
|
}
|