feat: implement horizontal scroll for testimonials and display all reviews in dashboard

This commit is contained in:
pradeepkumar
2026-04-17 08:08:04 +05:30
parent 8cb5902200
commit 9985f533a9
2 changed files with 13 additions and 9 deletions

View File

@@ -137,9 +137,9 @@ export default function AgentDashboard() {
setPendingRequestCount(requestCounts.pending); setPendingRequestCount(requestCounts.pending);
} }
// Map testimonials for TestimonialsSection (latest 3) // Map all testimonials for TestimonialsSection (horizontal scroll)
setTestimonials( setTestimonials(
testimonialsData.slice(0, 3).map((t) => ({ testimonialsData.map((t) => ({
id: t.id, id: t.id,
text: t.text, text: t.text,
author: t.authorName, author: t.authorName,

View File

@@ -30,15 +30,19 @@ export function TestimonialsSection({ testimonials }: TestimonialsSectionProps)
<p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] text-center mb-8"> <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] text-center mb-8">
Clients rate our real estate services {averageRating} out of 5 on average, based on {testimonials.length} recent client review{testimonials.length !== 1 ? 's' : ''}. Clients rate our real estate services {averageRating} out of 5 on average, based on {testimonials.length} recent client review{testimonials.length !== 1 ? 's' : ''}.
</p> </p>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 lg:items-stretch"> <div className="flex gap-6 overflow-x-auto pb-2 -mx-2 px-2 snap-x snap-mandatory lg:snap-none items-stretch">
{testimonials.map((testimonial) => ( {testimonials.map((testimonial) => (
<TestimonialCard <div
key={testimonial.id} key={testimonial.id}
className="flex-none w-[85%] sm:w-[45%] lg:w-[calc((100%-3rem)/3)] snap-start"
>
<TestimonialCard
text={testimonial.text} text={testimonial.text}
author={testimonial.author} author={testimonial.author}
role={testimonial.role} role={testimonial.role}
rating={testimonial.rating} rating={testimonial.rating}
/> />
</div>
))} ))}
</div> </div>
</div> </div>