69 lines
No EOL
1.9 KiB
TypeScript
69 lines
No EOL
1.9 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
|
|
schema?: 'base' | 'contrast',
|
|
unoptimized?: boolean,
|
|
opaque?: boolean
|
|
}
|
|
|
|
export const ImageWithText = (
|
|
{
|
|
backgroundColor,
|
|
title,
|
|
image,
|
|
text, link,
|
|
schema = 'base',
|
|
unoptimized = true,
|
|
opaque = false,
|
|
}: ImageWithTextProps) => {
|
|
return (
|
|
<Section backgroundColor={backgroundColor}>
|
|
<Container>
|
|
<Row alignItems={'center'}>
|
|
<div className={classNames(styles.col, styles.imageCol)}>
|
|
<Image
|
|
className={classNames({[styles.image]: true, [styles.imageOpaque]: opaque})}
|
|
width={800}
|
|
height={800}
|
|
src={image}
|
|
objectFit={'cover'}
|
|
unoptimized={unoptimized}
|
|
alt={''} />
|
|
</div>
|
|
<div className={styles.col}>
|
|
<Title title={title} size={'lg'} color={schema} />
|
|
|
|
<Image
|
|
className={styles.imageMobile}
|
|
width={500}
|
|
height={500}
|
|
src={image}
|
|
objectFit={'cover'}
|
|
unoptimized={unoptimized}
|
|
alt={''} />
|
|
|
|
<TextDiv text={text} />
|
|
|
|
{link &&
|
|
<div className={styles.right}>
|
|
{link}
|
|
</div>
|
|
}
|
|
</div>
|
|
</Row>
|
|
</Container>
|
|
</Section>
|
|
)
|
|
} |