rating star project

src/App.jsx

@@ -6,7 +6,7 @@ import Header from "@/layouts/header";
 import Home from "@/pages/Home";
 import NotFound from "@/pages/404";
 import Accordion from "@/pages/accordion/accordion";
-import RandomColor from "@/pages/RandomColor"
+import RandomColor from "@/pages/RandomColor";
 import StarRating from "@/pages/starRating";
 
 function App() {
@@ -15,10 +15,10 @@ function App() {
  <Header />
  <Routes>
  <Route path="React-Project">
- <Route index element={<Home />} /> 
+ <Route index element={<Home />} />
  {/* Accordion component */}
  <Route path="accordion" element={<Accordion />} />
- {/* Random color generator */} 
+ {/* Random color generator */}
  <Route path="color-generator" element={<RandomColor />} />
  {/* Star Rating */}
  <Route path="star-rating" element={<StarRating />} />

src/pages/starRating.jsx

@@ -1,9 +1,45 @@
-export default function StarRating() {
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { FaStar } from "react-icons/fa"; // Correct import for FaStar
+
+function StarRating({ numOfStars = 5 }) {
+ const [rating, setRating] = useState(0);
+ const [hover, setHover] = useState(0);
+
+ function handleClick(getCurrentLIndex) {
+ setRating(getCurrentLIndex)
+ }
+ function handleMouseEnter(getCurrentLIndex) {
+ setHover(getCurrentLIndex)
+ }
+ function handleMouseLeave() {
+ setHover(rating)
+ }
+
  return (
  <div
- className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen`}
+ className={`container flex flex-1 items-center justify-center gap-8 my-10 w-full h-screen`}
  >
+ {[...Array(numOfStars)].map((_, index) => {
+ index += 1;
 
+ return (
+ <FaStar
+ key={index}
+ className={index <= (hover || rating) ? 'active text-primary' : 'inactive text-white'}
+ onClick={() => handleClick(index)}
+ onMouseMove={() => handleMouseEnter(index)}
+ onMouseLeave={() => handleMouseLeave(index)}
+ size={40}
+ />
+ );
+ })}
  </div>
  );
 }
+
+StarRating.propTypes = {
+ numOfStars: PropTypes.number,
+};
+
+export default StarRating