70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import Autoplay from 'embla-carousel-autoplay';
|
|
import { Carousel } from '@mantine/carousel';
|
|
import { Avatar, Card, Group, Stack, Text, Title } from '@mantine/core';
|
|
import styles from './Testimonial.module.css';
|
|
|
|
export interface TestimonialItem {
|
|
text: string;
|
|
clientName: string;
|
|
role: string;
|
|
business: string;
|
|
}
|
|
|
|
const defaultTestimonials: TestimonialItem[] = [
|
|
{
|
|
text: "What set Craig apart was his ability to understand our business challenges and deliver a solution that worked for us. He didn't just build a model, he delivered a system our team could actually use.",
|
|
clientName: 'Steven Adair',
|
|
role: 'Director',
|
|
business: 'Managing Utilities Limited',
|
|
},
|
|
];
|
|
|
|
interface TestimonialsCarouselProps {
|
|
testimonials?: TestimonialItem[];
|
|
}
|
|
|
|
function TestimonialsCarousel({ testimonials = defaultTestimonials }: TestimonialsCarouselProps) {
|
|
const autoplay = Autoplay();
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Title ta="center" mb="xl">
|
|
Testimonials
|
|
</Title>
|
|
<Carousel
|
|
slideSize="100%"
|
|
slideGap="md"
|
|
loop
|
|
align="start"
|
|
plugins={[autoplay]}
|
|
onMouseEnter={autoplay.stop}
|
|
onMouseLeave={autoplay.reset}
|
|
withControls
|
|
>
|
|
{testimonials.map((testimonial, index) => (
|
|
<Carousel.Slide key={index}>
|
|
<Card shadow="sm" padding="lg" radius="md" withBorder className={styles.card}>
|
|
<Stack gap="sm">
|
|
<Text size="lg">{testimonial.text}</Text>
|
|
<Group gap="sm">
|
|
<Avatar radius="xl">{testimonial.clientName.charAt(0)}</Avatar>
|
|
<div>
|
|
<Text size="lg" fw={700}>
|
|
{testimonial.clientName}
|
|
</Text>
|
|
<Text size="sm" c="dimmed">
|
|
{testimonial.role}, {testimonial.business}
|
|
</Text>
|
|
</div>
|
|
</Group>
|
|
</Stack>
|
|
</Card>
|
|
</Carousel.Slide>
|
|
))}
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TestimonialsCarousel;
|