|
|
|
@ -2,8 +2,8 @@ import React, { useState } from "react"; |
|
|
|
|
import "./StarRating.scss"; |
|
|
|
|
|
|
|
|
|
const StarRating = () => { |
|
|
|
|
const [rating, setRating] = useState(0); |
|
|
|
|
const [hover, setHover] = useState(0); |
|
|
|
|
const [rating, setRating] = useState(5); |
|
|
|
|
// const [hover, setHover] = useState(5);
|
|
|
|
|
return ( |
|
|
|
|
<div className="star-rating"> |
|
|
|
|
{[...Array(5)].map((star, index) => { |
|
|
|
@ -12,12 +12,12 @@ const StarRating = () => { |
|
|
|
|
<button |
|
|
|
|
type="button" |
|
|
|
|
key={index} |
|
|
|
|
className={index <= (hover || rating) ? "on" : "off"} |
|
|
|
|
className={index <= rating ? "on" : "off"} |
|
|
|
|
onClick={() => setRating(index)} |
|
|
|
|
onMouseEnter={() => setHover(index)} |
|
|
|
|
onMouseLeave={() => setHover(rating)} |
|
|
|
|
// onMouseEnter={() => setHover(index)}
|
|
|
|
|
// onMouseLeave={() => setHover(rating)}
|
|
|
|
|
> |
|
|
|
|
<span className="star text-lg">★</span> |
|
|
|
|
<span className="star text-2xl">★</span> |
|
|
|
|
</button> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|