Skip to content

Commit 17dc07c

Browse files
wenyngcarwenyngcar
committed
format: npm run format
1 parent ece020a commit 17dc07c

1 file changed

Lines changed: 90 additions & 42 deletions

File tree

‎app/(home)/components/Testimonials.tsx‎

Lines changed: 90 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,23 @@ import Link from 'next/link';
77
import { CarouselDots, type CarouselApi } from '@/components/ui/carousel';
88
import { useState } from 'react';
99
import { useEffect } from 'react';
10-
import YellowStar from '@/public/assets/testimonials/yellow-star.svg'
11-
import WhiteStar from '@/public/assets/testimonials/white-star.svg'
12-
import ChatBubble from '@/public/assets/testimonials/chat-bubble.svg'
13-
import {
14-
Avatar,
15-
AvatarFallback,
16-
AvatarImage,
17-
} from "@/components/ui/avatar"
10+
import YellowStar from '@/public/assets/testimonials/yellow-star.svg';
11+
import WhiteStar from '@/public/assets/testimonials/white-star.svg';
12+
import ChatBubble from '@/public/assets/testimonials/chat-bubble.svg';
13+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
1814
import {
1915
Carousel,
2016
CarouselContent,
2117
CarouselItem,
2218
CarouselNext,
2319
CarouselPrevious,
24-
} from "@/components/ui/carousel"
20+
} from '@/components/ui/carousel';
2521

2622
type TestimonialProps = {
27-
text: string
28-
rate: number
29-
active: boolean
30-
}
23+
text: string;
24+
rate: number;
25+
active: boolean;
26+
};
3127

3228
export function Testimonials() {
3329
const dummyData = [
@@ -87,12 +83,12 @@ export function Testimonials() {
8783

8884
return (
8985
<section className="relative z-10 text-white py-12 sm:py-16 -ms-4 lg:-ms-0 ">
90-
<Container className='space-y-6 xl:space-x-0 mx-auto lg:space-y-3'>
86+
<Container className="space-y-6 xl:space-x-0 mx-auto lg:space-y-3">
9187
{/* Combined container: Ratings + Button */}
9288
<div className="flex flex-col space-y-5 xl:flex-row xl:justify-between px-[1%] 2xl:px-0 sm:pb-4 lg:flex-row lg:px-14">
9389
{/* Logo & Ratings */}
9490
<div className="flex flex-col items-center xl:items-start xl:text-left w-full lg:items-start">
95-
<div className='-space-y-4'>
91+
<div className="-space-y-4">
9692
<div className="flex items-center gap-x-2">
9793
<Image
9894
src="/assets/logo.svg"
@@ -112,9 +108,18 @@ export function Testimonials() {
112108
<span className="font-semibold mt-1">4.8</span>
113109
<div className="flex -space-x-3 sm:-space-x-1">
114110
{[...Array(4)].map((_, i) => (
115-
<Image src={YellowStar} alt="yellow star" key={i} className="p-2 sm:p-[6px]" />
111+
<Image
112+
src={YellowStar}
113+
alt="yellow star"
114+
key={i}
115+
className="p-2 sm:p-[6px]"
116+
/>
116117
))}
117-
<Image src={WhiteStar} alt="yellow star" className="p-2 sm:p-[6px]" />
118+
<Image
119+
src={WhiteStar}
120+
alt="yellow star"
121+
className="p-2 sm:p-[6px]"
122+
/>
118123
</div>
119124
<span className="font-light mt-1">5 reviews</span>
120125
</div>
@@ -143,34 +148,57 @@ export function Testimonials() {
143148
autoplayInterval={5000}
144149
onClick={() => setIsInteracting(true)}
145150
onMouseLeave={() => setIsInteracting(false)}
146-
className='max-w-96 sm:w-96 lg:max-w-full lg:w-full lg:px-5 mx-auto bg-red-300'
151+
className="max-w-96 sm:w-96 lg:max-w-full lg:w-full lg:px-5 mx-auto bg-red-300"
147152
>
148-
<CarouselContent className='flex mx-auto sm:-ms-4 lg:-ms-0 lg:py-8'>
153+
<CarouselContent className="flex mx-auto sm:-ms-4 lg:-ms-0 lg:py-8">
149154
{dummyData.map((data, index) => (
150-
< CarouselItem className="flex-col justify-center lg:basis-1/3 lg:px-11" key={index} >
151-
<TestimonialCard text={data.comment} rate={data.rate} active={current === index ? true : false} />
155+
<CarouselItem
156+
className="flex-col justify-center lg:basis-1/3 lg:px-11"
157+
key={index}
158+
>
159+
<TestimonialCard
160+
text={data.comment}
161+
rate={data.rate}
162+
active={current === index ? true : false}
163+
/>
152164
<div
153-
className={current === index ? "flex justify-center items-center space-x-3 mt-4 sm:mt-2 sm:-ms-16 lg:-ms-5 lg:scale-125 lg:mt-12 transition-all duration-300 ease-in-out" : "flex justify-center items-center space-x-3 mt-4 sm:mt-2 sm:-ms-16 lg:-ms-0 lg:mb-12 transition-all duration-300 ease-in-out"}
165+
className={
166+
current === index
167+
? 'flex justify-center items-center space-x-3 mt-4 sm:mt-2 sm:-ms-16 lg:-ms-5 lg:scale-125 lg:mt-12 transition-all duration-300 ease-in-out'
168+
: 'flex justify-center items-center space-x-3 mt-4 sm:mt-2 sm:-ms-16 lg:-ms-0 lg:mb-12 transition-all duration-300 ease-in-out'
169+
}
154170
>
155-
<Avatar className='h-16 w-16'>
171+
<Avatar className="h-16 w-16">
156172
<AvatarImage src={data.profilePic} />
157-
<AvatarFallback className='text-2xl text-[#B3B3B3]'>{data.name.split(' ').map(word => word[0]).join('').toUpperCase()}</AvatarFallback>
173+
<AvatarFallback className="text-2xl text-[#B3B3B3]">
174+
{data.name
175+
.split(' ')
176+
.map((word) => word[0])
177+
.join('')
178+
.toUpperCase()}
179+
</AvatarFallback>
158180
</Avatar>
159-
<div className='flex-col'>
181+
<div className="flex-col">
160182
<div>{data.name}</div>
161-
<div className='text-sm text-[#B3B3B3]'>{data.date}</div>
183+
<div className="text-sm text-[#B3B3B3]">{data.date}</div>
162184
</div>
163185
</div>
164186
</CarouselItem>
165187
))}
166188
</CarouselContent>
167-
<CarouselPrevious className='hidden sm:block absolute -left-24 h-20 w-20 -mt-[5%] lg:-left-6 lg:h-20 lg:w-20' onClick={() => api?.scrollTo(current - 1)} />
168-
<CarouselNext className='hidden sm:block absolute -right-24 h-20 w-20 -mt-[5%] lg:-right-6 lg:h-20 lg:w-20' onClick={() => api?.scrollTo(current + 1)} />
169-
<CarouselDots className='pt-5' />
189+
<CarouselPrevious
190+
className="hidden sm:block absolute -left-24 h-20 w-20 -mt-[5%] lg:-left-6 lg:h-20 lg:w-20"
191+
onClick={() => api?.scrollTo(current - 1)}
192+
/>
193+
<CarouselNext
194+
className="hidden sm:block absolute -right-24 h-20 w-20 -mt-[5%] lg:-right-6 lg:h-20 lg:w-20"
195+
onClick={() => api?.scrollTo(current + 1)}
196+
/>
197+
<CarouselDots className="pt-5" />
170198
</Carousel>
171199
</div>
172200
</Container>
173-
</section >
201+
</section>
174202
);
175203
}
176204

@@ -194,24 +222,44 @@ export function TestimonialCard({ text, rate, active }: TestimonialProps) {
194222
return (
195223
<>
196224
{/* Mobile View Display */}
197-
<div className='relative sm:hidden h-24 p-5 bg-medium-dark-green border border-[#36FF90] rounded-xl w-full text-clip overflow-hidden'>
198-
<div className='text-xs sm:text-base'>{text}</div>
199-
<div className='absolute bottom-0 pb-2 pt-14 bg-gradient-to-t from-medium-dark-green from-20% inset-x-5'>
200-
<a href='' target='_blank' className='text-xs sm:text-base text-yellow-400 underline'>Read more</a>
225+
<div className="relative sm:hidden h-24 p-5 bg-medium-dark-green border border-[#36FF90] rounded-xl w-full text-clip overflow-hidden">
226+
<div className="text-xs sm:text-base">{text}</div>
227+
<div className="absolute bottom-0 pb-2 pt-14 bg-gradient-to-t from-medium-dark-green from-20% inset-x-5">
228+
<a
229+
href=""
230+
target="_blank"
231+
className="text-xs sm:text-base text-yellow-400 underline"
232+
>
233+
Read more
234+
</a>
201235
</div>
202236
</div>
203237

204-
205238
{/* Tablet & Laptop View Display */}
206-
<div className={active === true ? "hidden sm:block relative transition-all duration-300 ease-in-out lg:scale-125" : "hidden sm:block relative transition-all duration-300 ease-in-out"}>
207-
<Image src={ChatBubble} alt='chat-bubble' />
208-
<div className='flex absolute top-5 inset-x-0 justify-center space-x-2.5 lg:space-x-0.5'>{starRate}</div>
209-
<div className='absolute top-16 mt-1 h-44 px-9 text-lg text-clip overflow-hidden lg:text-base lg:px-7 lg:h-1/3 xl:h-1/2'>{text}</div>
210-
<div className='absolute bottom-14 pb-2 pt-28 bg-gradient-to-t from-medium-dark-green from-25% inset-x-9 lg:inset-x-7 lg:bottom-10'>
211-
<a href='' target='_blank' className='text-[#B3B3B3] underline lg:text-xs'>Read more</a>
239+
<div
240+
className={
241+
active === true
242+
? 'hidden sm:block relative transition-all duration-300 ease-in-out lg:scale-125'
243+
: 'hidden sm:block relative transition-all duration-300 ease-in-out'
244+
}
245+
>
246+
<Image src={ChatBubble} alt="chat-bubble" />
247+
<div className="flex absolute top-5 inset-x-0 justify-center space-x-2.5 lg:space-x-0.5">
248+
{starRate}
249+
</div>
250+
<div className="absolute top-16 mt-1 h-44 px-9 text-lg text-clip overflow-hidden lg:text-base lg:px-7 lg:h-1/3 xl:h-1/2">
251+
{text}
252+
</div>
253+
<div className="absolute bottom-14 pb-2 pt-28 bg-gradient-to-t from-medium-dark-green from-25% inset-x-9 lg:inset-x-7 lg:bottom-10">
254+
<a
255+
href=""
256+
target="_blank"
257+
className="text-[#B3B3B3] underline lg:text-xs"
258+
>
259+
Read more
260+
</a>
212261
</div>
213262
</div>
214263
</>
215-
216264
);
217265
}

0 commit comments

Comments
 (0)