Testimonial.js
5.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import Image from "next/image";
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
import "swiper/css";
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">
<div className="container">
<div className="row">
<div className="col-12">
<div className="testimonial-carousal position-relative">
<Swiper
slidesPerView={1}
autoplay={{
delay: 9000,
disableOnInteraction: false
}}
autoHeight={true}
spaceBetween={10}
navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{testimonial?.data &&
testimonial?.data.map((data, index) => {
return (
<SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<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>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a> */}
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</div>
<div className="disc">{data?.attributes?.description}</div>
<div className="name">{data?.attributes?.title}</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between justify-content-md-between ">
<button className="testimonial-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="testimonial-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default Testimonial;