data fetch in testimonial section

This commit is contained in:
rahat0078
2026-04-04 23:46:10 +06:00
parent d96ab17169
commit d3143523d6
3 changed files with 19 additions and 13 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+3 -3
View File
@@ -23,7 +23,7 @@ export default function TeamSection() {
const ref = useRef<HTMLElement>(null); const ref = useRef<HTMLElement>(null);
const isInView = useInView(ref, { once: true, margin: "-100px" }); const isInView = useInView(ref, { once: true, margin: "-100px" });
const shouldScroll = team.length >= 5; const shouldScroll = team?.length >= 5;
return ( return (
<section id="team" ref={ref} className="py-24 relative overflow-hidden"> <section id="team" ref={ref} className="py-24 relative overflow-hidden">
@@ -76,8 +76,8 @@ export default function TeamSection() {
1280: { slidesPerView: 4 }, 1280: { slidesPerView: 4 },
}} }}
> >
{team.map((member, index) => ( {team?.map((member, index) => (
<SwiperSlide key={member.name}> <SwiperSlide key={member._id}>
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
+15 -9
View File
@@ -4,6 +4,7 @@ import { Star, ChevronLeft, ChevronRight, Quote } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import useEmblaCarousel from 'embla-carousel-react'; import useEmblaCarousel from 'embla-carousel-react';
import Autoplay from 'embla-carousel-autoplay'; import Autoplay from 'embla-carousel-autoplay';
import { useReviews } from '@/hooks/queires/useReviews';
const testimonials = [ const testimonials = [
{ {
@@ -49,6 +50,11 @@ const testimonials = [
]; ];
export default function TestimonialsSection() { export default function TestimonialsSection() {
const {data: reveiwsData} = useReviews();
const testimonials = reveiwsData?.data.data;
const [emblaRef, emblaApi] = useEmblaCarousel( const [emblaRef, emblaApi] = useEmblaCarousel(
{ loop: true, align: 'center' }, { loop: true, align: 'center' },
[Autoplay({ delay: 5000, stopOnInteraction: false })] [Autoplay({ delay: 5000, stopOnInteraction: false })]
@@ -123,9 +129,9 @@ export default function TestimonialsSection() {
{/* Carousel Container */} {/* Carousel Container */}
<div className="overflow-hidden" ref={emblaRef}> <div className="overflow-hidden" ref={emblaRef}>
<div className="flex"> <div className="flex">
{testimonials.map((testimonial, index) => ( {testimonials?.map((testimonial, index) => (
<div <div
key={testimonial.id} key={testimonial._id}
className="flex-[0_0_100%] min-w-0 px-4 md:flex-[0_0_80%] lg:flex-[0_0_60%]" className="flex-[0_0_100%] min-w-0 px-4 md:flex-[0_0_80%] lg:flex-[0_0_60%]"
> >
<motion.div <motion.div
@@ -144,7 +150,7 @@ export default function TestimonialsSection() {
{/* Stars */} {/* Stars */}
<div className="flex gap-1 mb-6"> <div className="flex gap-1 mb-6">
{[...Array(testimonial.rating)].map((_, i) => ( {[...Array(testimonial.rating)]?.map((_, i) => (
<Star <Star
key={i} key={i}
className="w-5 h-5 fill-primary text-primary" className="w-5 h-5 fill-primary text-primary"
@@ -154,22 +160,22 @@ export default function TestimonialsSection() {
{/* Quote */} {/* Quote */}
<p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed"> <p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed">
"{testimonial.quote}" "{testimonial.review}"
</p> </p>
{/* Author */} {/* Author */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<img <img
src={testimonial.avatar} src={testimonial.thumbnail}
alt={testimonial.name} alt={testimonial.client_name}
className="w-14 h-14 rounded-full object-cover border-2 border-primary/50" className="w-14 h-14 rounded-full object-cover border-2 border-primary/50"
/> />
<div> <div>
<h4 className="font-bold text-foreground"> <h4 className="font-bold text-foreground">
{testimonial.name} {testimonial.client_name}
</h4> </h4>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{testimonial.role} {testimonial.designation}
</p> </p>
</div> </div>
</div> </div>
@@ -181,7 +187,7 @@ export default function TestimonialsSection() {
{/* Dots Indicator */} {/* Dots Indicator */}
<div className="flex justify-center gap-2 mt-8"> <div className="flex justify-center gap-2 mt-8">
{testimonials.map((_, index) => ( {testimonials?.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => emblaApi?.scrollTo(index)} onClick={() => emblaApi?.scrollTo(index)}