Star Rating(React)

<React.Fragment>
    <div>
        <StarRating rating={0} />
    </div>
    <div>
        <StarRating rating={2.5} />
    </div>
    <div>
        <StarRating rating={5} />
    </div>
    <div>
        <StarRating rating={0} size="medium" />
    </div>
    <div>
        <StarRating rating={2.5} size="medium" />
    </div>
    <div>
        <StarRating rating={5} size="medium" />
    </div>
    <div>
        <StarRating rating={0} size="large" />
    </div>
    <div>
        <StarRating rating={2.5} size="large" />
    </div>
    <div>
        <StarRating rating={5} size="large" />
    </div>
</React.Fragment>

<div className="flex">
    <StarRating rating={2.7} size="large" />
    <span className="ml3 b">13 reviews</span>
</div>

function StarRatingExample() {
    const [rating, setRating] = React.useState(3);
    const [hoverRating, setHoverRating] = React.useState(undefined);
    return (
        <StarRating
            size="large"
            rating={rating}
            hoverRating={hoverRating}
            onStarClick={value => {
                setRating(value);
                console.log(`StarRating: Clicked on ${value}`);
            }}
            onStarHover={value => {
                setHoverRating(value);
                console.log(`StarRating: Hovered over ${value}`);
            }}
            onMouseLeave={() => {
                setHoverRating(undefined);
                console.log('StarRating: onMouseLeave');
            }}
        />
    );
}