54 lines
3.0 KiB
TypeScript
54 lines
3.0 KiB
TypeScript
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
|
|
import NextBlocksRenderer from "@/components/next.blocks.renderer";
|
|
import styles from './block.with.right.image.component.module.css';
|
|
import clsx from "clsx";
|
|
|
|
export default function BlockWithRightImage({
|
|
id, title, header, block, button, image: {
|
|
url,
|
|
},
|
|
}: BlockWithImageComponentProps) {
|
|
|
|
|
|
return (
|
|
<section className={clsx("block_with_right_image_section","block_with_image","block_with_right_image")} id={id}>
|
|
<div className="container">
|
|
<div className="block_with_image_box">
|
|
<div className="row">
|
|
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
|
|
<div className={ clsx("block_with_right_image_content","block-with-image-content","block-with-right-image-content")}>
|
|
{
|
|
url && <div className="block_with_right_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none">
|
|
<figure className="mb-0">
|
|
<YogaImageComponent src={url} alt=""
|
|
className={clsx("img-fluid", "float-right", styles.rightImage)}/>
|
|
</figure>
|
|
</div>
|
|
}
|
|
{title && <h5>{title}</h5>}
|
|
{header && <h2>{header}</h2>}
|
|
<NextBlocksRenderer content={block}/>
|
|
<div className="btn_wrapper">
|
|
{button && <a href={button.link}
|
|
className="text-decoration-none read_more_btn">{button.label}</a>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{ url && <div className="block_with_right_image_image d-lg-none d-md-none col-sm-12 col-xs-12">
|
|
<figure className="mb-0">
|
|
<YogaImageComponent src={url} alt=""
|
|
className={clsx("img-fluid", "float-right", styles.rightImage)}/>
|
|
</figure>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<figure className="block_with_right_image_right_shape right_shape mb-0">
|
|
<YogaImageComponent src="./assets/images/our_block_with_image_shape.png" alt="" className="img-fluid"/>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|