Files
yogastic/yoga-app/src/components/subscribe.component.tsx
2025-08-27 09:21:20 +02:00

56 lines
2.4 KiB
TypeScript

import YogaImageComponent from "@/components/yoga.image.component";
import {
YogaSubscribeNowComponent_Plain
} from "@/types/generated-strapi-interfaces/api/yoga-subscribe-now-component";
import clsx from "clsx";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";
import styles from './subscribe.component.module.css'
export interface Props{
config: YogaSubscribeNowComponent_Plain,
styleClass?: string,
}
const SubscribeComponent = ({
config: {title,header,placeHolderEmail,buttonSubscribeLabel, image = undefined},
styleClass
}: Props) => {
const imageFile: StrapiFile = image as StrapiFile;
if (!imageFile || !imageFile.url) {
return null
}
return (
<section className={clsx("subscribe_section",styleClass)}>
<div className="container">
<div className="subscribe_background_image">
<div className="row">
<div className="col-lg-7 col-md-7 col-sm-6 col-xs-12" data-aos="fade-right">
<div className="subscribe_content">
<h5>{title}</h5>
<h2>{header}</h2>
<form method="POST">
<div className="form-row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<input type="email" name="email" id="emailadd" className="form-control"
placeholder={placeHolderEmail}/>
<button type="submit" name="btnsubmit" id="submitbutton">{buttonSubscribeLabel}</button>
</div>
</div>
</form>
</div>
</div>
<div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<figure className={clsx(styles.roundedImage,"subscribe_image","mb-0",)}>
<YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt=""/>
</figure>
</div>
</div>
</div>
</div>
</section>
);
}
export default SubscribeComponent;