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);  

src/components/StarRating/StarRating.scss

@@ -0,0 +1,45 @@
+.rating{
+	display: flex;
+	align-items: center;
+	font-size: var(--size);
+	line-height: 0.75;
+	&__body{
+		position: relative;
+		&::before{
+			content: attr(data-content);
+			display: block;
+			color: var(--color);
+		}
+	}
+	&__active{
+		position: absolute;
+		height: 100%;
+		width: var(--width);
+		top: 0;
+		left: 0;
+		overflow: hidden;
+		&::before{
+			content: attr(data-content);
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			color: var(--color);
+		}
+	}
+	&__items{
+		display: flex;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+	&__item{
+		flex: 0 0 20%;
+		height: 100%;
+		opacity: 0;
+	}
+}
+