You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Lidarr/frontend/src/Components/StarRating.js

45 lines
1.3 KiB

import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
4 years ago
import { icons } from 'Helpers/Props';
import styles from './StarRating.css';
function StarRating({ rating, votes, iconSize }) {
const starWidth = {
width: `${rating * 10}%`
};
const helpText = `${rating/2} (${votes} Votes)`;
return (
<span className={styles.starRating} title={helpText}>
<div className={styles.backStar}>
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<div className={styles.frontStar} style={starWidth}>
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
</div>
</div>
</span>
);
}
StarRating.propTypes = {
rating: PropTypes.number.isRequired,
votes: PropTypes.number.isRequired,
iconSize: PropTypes.number.isRequired
};
StarRating.defaultProps = {
iconSize: 14
};
export default StarRating;