updated

components/admin/ReviewsListing.js

@@ -37,7 +37,7 @@ const ReviewsListing = ({ activityId, setshowReviews, isVendor }) => {
       <div className="container  mt-5">
         {reviews && !reviews.length > 0 && <Empty />}
         {!loading ? (
-          <Accordion className="accordion-filter" defaultActiveKey="0" flush>
+          <Accordion className="accordion-filter accordion-01" defaultActiveKey="0" flush>
             {reviews &&
               reviews.map(item => {
                 return (

components/detail/GuestReviews.js

 import Image from "next/image";
+import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
 import { useRouter } from "next/router";
 import React, { useState } from "react";
 import { Button, Modal } from "react-bootstrap";
@@ -6,6 +7,11 @@ import { useSelector } from "react-redux";
 import StarRatings from "react-star-ratings";
 import { postReviewEndUser } from "../../redux/actions/reviewsAction";
 import { dateFormatFn } from "../../services/imageHandling";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay, Pagination } from "swiper/modules";
+import { motion } from "framer-motion";
+import "swiper/css";
+import "swiper/css/pagination";
 
 const GuestReviews = ({ activityById }) => {
   const [rating, setRating] = useState(0);
@@ -49,10 +55,42 @@ const GuestReviews = ({ activityById }) => {
                 </div>
               </div>
               <div className="row">
+                <div className="col-md-12">
+                  <Swiper
+                    // slidesPerView={2}
+                    autoplay={{
+                      delay: 9000,
+                      disableOnInteraction: false
+                    }}
+                    autoHeight={true}
+                    spaceBetween={10}
+                    pagination={{
+                      clickable: true
+                    }}
+                    // navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
+                    breakpoints={{
+                      640: {
+                        slidesPerView: 1,
+                        spaceBetween: 20,
+                        autoplay: true
+                      },
+                      768: {
+                        slidesPerView: 1,
+                        spaceBetween: 40
+                      },
+                      1024: {
+                        slidesPerView: 2,
+                        spaceBetween: 40
+                      }
+                    }}
+                    modules={[Navigation, Autoplay, Pagination]}
+                    className="mySwiper-guestreview"
+                  >
                     {reviews &&
                       reviews.map(data => {
                         return (
-                      <div className="col-md-6">
+                          <SwiperSlide>
+                            <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                               <div className="guest-reviews-detail">
                                 <div className="head">
                                   <div className="name">{data.attributes.endUser.data.attributes.name}</div>
@@ -69,8 +107,8 @@ const GuestReviews = ({ activityById }) => {
                                   starDimension="20px" // Set star width and height
                                 />
                                 <div className="review-content">
-                            "{data.attributes.comments.length > 80 ? `${data.attributes.comments.slice(0, 80)}...` : data.attributes.comments}
-                            {data.attributes.comments.length > 80 && (
+                                  "{data.attributes.comments.length > 180 ? `${data.attributes.comments.slice(0, 180)}...` : data.attributes.comments}
+                                  {data.attributes.comments.length > 180 && (
                                     <a
                                       onClick={() => {
                                         setreadMoreText(data);
@@ -83,9 +121,12 @@ const GuestReviews = ({ activityById }) => {
                                 </div>
                                 {/* View All */}
                               </div>
-                      </div>
+                            </motion.div>
+                          </SwiperSlide>
                         );
                       })}
+                  </Swiper>
+                </div>
               </div>
               {endUser && (
                 <div className="row">
@@ -141,6 +182,7 @@ const GuestReviews = ({ activityById }) => {
         </div>
         {readMoreText && (
           <Modal
+            className="guest-reviews-detail"
             centered
             show={showModal}
             onHide={() => {
@@ -148,7 +190,11 @@ const GuestReviews = ({ activityById }) => {
               setreadMoreText(null);
             }}
           >
-            <Modal.Header closeButton>Review from {readMoreText.attributes.endUser.data.attributes.name}</Modal.Header>
+            <Modal.Header closeButton>
+              <div className="head">
+                <div className="name">Review from {readMoreText.attributes.endUser.data.attributes.name}</div>
+              </div>
+            </Modal.Header>
             <Modal.Body>
               <div>{readMoreText.attributes.comments}</div>
             </Modal.Body>

styles/globals.css

@@ -2471,7 +2471,15 @@ footer hr {
   align-items: center;
   padding: 0.5rem 0 2rem;
 }
-
+.product-reviews .review{
+  margin-left: 1rem;
+}
+.guest-reviews-detail .star-ratings .star-container{
+  padding: 0 0.1rem !important;
+}
+.guest-reviews-detail .star-ratings{
+  margin-bottom: 1rem;
+}
 .product-info .product-reviews .star {
   display: flex;
   align-items: center;
@@ -2653,10 +2661,14 @@ footer hr {
 }
 
 .review-content a {
-  color: #808080;
+  color: #808080 !important;
   text-decoration: underline !important;
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+.guest-reviews-detail.modal .head{
+  margin-bottom: 0;
 }
-
 .guest-reviews-detail {
   margin-right: 3rem;
 }