62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Carousel } from '@mantine/carousel';
|
|
import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core';
|
|
import classes from './ExpertiseSection.module.css';
|
|
|
|
interface ExpertiseSectionProps {
|
|
title: string;
|
|
content: string;
|
|
images: { url: string; alt: string }[];
|
|
viewMoreLink: string;
|
|
imageOnLeft?: boolean;
|
|
}
|
|
|
|
const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
|
|
title,
|
|
content,
|
|
images,
|
|
viewMoreLink: _viewMoreLink,
|
|
imageOnLeft = false,
|
|
}) => {
|
|
const slides = images.map((image) => (
|
|
<Carousel.Slide key={image.url}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.alt}
|
|
style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
|
|
/>
|
|
</Carousel.Slide>
|
|
));
|
|
|
|
return (
|
|
<Container>
|
|
<Grid className={classes.section}>
|
|
<Grid.Col order={imageOnLeft ? 2 : 1} span={{ xs: 6, md: 8 }}>
|
|
<Stack>
|
|
<Title>{title}</Title>
|
|
<Text size="lg">{content}</Text>
|
|
{/* <Button component="a" href={viewMoreLink}>
|
|
View More
|
|
</Button> */}
|
|
</Stack>
|
|
</Grid.Col>
|
|
<Grid.Col order={imageOnLeft ? 1 : 2} span={{ xs: 6, md: 4 }}>
|
|
<Carousel
|
|
slideSize={300}
|
|
align="start"
|
|
slideGap="md"
|
|
controlsOffset="xl"
|
|
controlSize={28}
|
|
loop
|
|
withIndicators
|
|
>
|
|
{slides}
|
|
</Carousel>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default ExpertiseSection;
|