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