E-Commerce-Module/frontend/src/components/ProductRatingDisplay.jsx

27 lines
No EOL
710 B
JavaScript

import React from 'react';
import { Box, Typography, Rating } from '@mui/material';
/**
* Component to display product rating in a compact format
*/
const ProductRatingDisplay = ({ rating, reviewCount, showEmpty = false }) => {
if (!rating && !reviewCount && !showEmpty) {
return null;
}
return (
<Box sx={{ display: 'flex', alignItems: 'center', my: 1 }}>
<Rating
value={rating || 0}
readOnly
precision={0.5}
size="small"
/>
<Typography variant="body2" color="text.secondary" sx={{ ml: 0.5 }}>
{reviewCount ? `(${reviewCount})` : showEmpty ? '(0)' : ''}
</Typography>
</Box>
);
};
export default ProductRatingDisplay;