rating changes

components/home/Testimonial.js

 import Image from "next/image";
-import React from "react";
+import React, { useState } from "react";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import { Navigation, Autoplay } from "swiper/modules";
+import StarRatings from 'react-star-ratings';
+
 import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
 import { motion } from "framer-motion";
 // Import Swiper styles
@@ -12,6 +14,11 @@ import "swiper/css/pagination";
 import "swiper/css/navigation";
 
 const Testimonial = ({ testimonial }) => {
+  const [rating, setRating] = useState(0);
+
+  const handleRatingChange = (newRating) => {
+    setRating(newRating);
+  };
   return (
     <>
       <section className="testimonial-session">
@@ -43,7 +50,17 @@ const Testimonial = ({ testimonial }) => {
                                 </span>
                               </div>
                               <div className="rating">
-                                <a href="">
+                              <StarRatings
+                                rating={rating}
+                                starRatedColor="yellow" // Set the rated color to yellow
+                                starHoverColor="yellow" // Set the hover color to yellow
+                                changeRating={handleRatingChange}
+                                numberOfStars={5}
+                                name='rating'
+                                starDimension="16px" // Set star width and height
+                              />
+                              {/* <p>You rated this: {rating} stars</p> */}
+                                {/* <a href="">
                                   <span className="image-container">
                                     <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                   </span>
@@ -67,7 +84,7 @@ const Testimonial = ({ testimonial }) => {
                                   <span className="image-container">
                                     <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                   </span>
-                                </a>
+                                </a> */}
                                 {/* <a href="">
                             <span className='fa fa-star'>
                                 <Image layout='fill' alt='' src="/images/icons/star.svg" />

package.json

@@ -34,9 +34,9 @@
         "react-owl-carousel": "^2.3.3",
         "react-phone-input-2": "^2.15.1",
         "react-player": "^2.11.0",
-        "react-rating": "^2.0.5",
         "react-redux": "^8.0.2",
         "react-select": "^5.8.0",
+        "react-star-ratings": "^2.3.0",
         "react-toastify": "^9.0.8",
         "reactjs-otp-input": "^2.0.8",
         "redux": "^4.2.0",

styles/globals.css

@@ -2727,6 +2727,13 @@ footer hr {
   border: 1px solid #000;
   border-radius: 10px;
 }
+.testimonial-session .rating{
+  margin-bottom: 0.5rem;
+}
+.testimonial-session .rating .star-ratings svg{
+    width: 33px !important;
+    height: 33px !important;
+}
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 0 2rem;