church-website/src/compositions/ImageWithText/ImageWithText.tsx
2024-11-27 18:13:20 +01:00

44 lines
No EOL
1.4 KiB
TypeScript

import { BackgroundColor, Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { Container } from '@/components/Container/Container'
import Image, { StaticImageData } from 'next/image'
import styles from "./styles.module.scss"
import classNames from 'classnames'
import { Row } from '@/components/Flex/Row'
import { TextDiv } from '@/components/Text/TextDiv'
type ImageWithTextProps = {
backgroundColor?: BackgroundColor,
title: string,
image: StaticImageData | string,
text: string
link?: React.ReactNode
}
export const ImageWithText = ({backgroundColor, title, image, text, link}: ImageWithTextProps) => {
console.log(image)
return (
<Section backgroundColor={backgroundColor}>
<Container>
<Row alignItems={"center"}>
<div className={classNames(styles.col, styles.imageCol)}>
<Image className={styles.image} width={800} height={800} src={image} objectFit={"cover"} alt={""} />
</div>
<div className={styles.col}>
<Title title={title} size={"lg"} />
<Image className={styles.imageMobile} width={500} height={500} src={image} objectFit={"cover"} alt={""} />
<TextDiv text={text} />
{link &&
<div className={styles.right}>
{link}
</div>
}
</div>
</Row>
</Container>
</Section>
)
}