quiz + lk-candidate

src/components/StarRating/StarRating.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import './StarRating.scss'
+
+const StarRating = ({ countStars=1, countActiveStars=1, color='#52B709', size=61 }) => {
+	const [shadedStars, setShadedStars] = useState([])
+	const [noShadedStars, setNoShadedStars] = useState([])
+	const percent = (Math.abs(countActiveStars)) >= countStars ? 100 : (countActiveStars * 100 / countStars)
+	useEffect(() => {
+		for (let index = 0; index < countStars; index++) {
+			setShadedStars(prev => [...prev, '★'])
+			setNoShadedStars(prev => [...prev, '☆'])
+		}
+	}, [])
+
+	const ratingStyle = {
+		"--size": size+'px'
+	}
+	const activeStyle = {
+		"--width": percent + '%',
+		"--color": color,
+		"--content": shadedStars.join('')
+	}
+	const bodyStyle = {
+		"--content": noShadedStars.join(''),
+		"--color": color
+	}
+
+	return (
+		<div className='rating' style={ratingStyle}>
+			<div className="rating__body" style={bodyStyle} data-content={noShadedStars.join('')}>
+				<div className="rating__active" style={activeStyle} data-content={shadedStars.join('')}></div>
+				<div className="rating__items">
+					<input type='radio' className="rating__item" value={1} name='star'></input>
+					<input type='radio' className="rating__item" value={2} name='star'></input>
+					<input type='radio' className="rating__item" value={3} name='star'></input>
+					<input type='radio' className="rating__item" value={4} name='star'></input>
+					<input type='radio' className="rating__item" value={5} name='star'></input>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default React.memo(StarRating);