rating star project

Author: nuexq

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