import { useState } from 'react'
import { Star } from 'react-feather'
import styles from './rating.module.scss'
type RatingProps = {
value: number
max?: number
}
const Rating = ({ value, max = 5 }: RatingProps) => {
/* Calculate how much of the stars should be "filled" */
const percentage = Math.round((value / max) * 100)
return (
<div className={styles.container}>
{/* Create an array based on the max rating, render a star for each */}
{Array.from(Array(max).keys()).map((_, i) => (
<Star key={String(i)} className={styles.star} />
))}
{/* Render a div overlayed on top of the stars that are not filled */}
<div className={styles.overlay} style={{ width: `${100 - percentage}%` }} />
</div>
)
}
export const RatingPlayground = () => {
const [value, setValue] = useState(4.6)
const [max, setMax] = useState(5)
return (
<div className={styles.playground}>
<Rating value={value} max={max} />
<div className={styles.controls}>
<label>
Value
<input type="number" value={value} step={0.1} min={0.1} max={max} onChange={e => setValue(+e.target.value)} />
</label>
<label>
Max
<input type="number" value={max} onChange={e => setMax(+e.target.value)} min={1} max={10} />
</label>
</div>
<p className={styles.pointer}>Test the component by changing the values above 👆</p>
</div>
)
}
export default Rating
