[yoga-20] subscribe.component.tsx: make image editable

yoga-app/src/components/subscribe.component.tsx

@@ -3,14 +3,22 @@ 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
+    styleClass?: string,
 }
 const SubscribeComponent = ({
-                                config: {title,header,placeHolderEmail,buttonSubscribeLabel},
+                                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">
@@ -32,8 +40,8 @@ const SubscribeComponent = ({
                             </div>
                         </div>
                         <div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
-                            <figure className="subscribe_image mb-0">
-                                <YogaImageComponent src="/assets/images/subscribe_image.png" alt=""/>
+                            <figure  className={clsx(styles.roundedImage,"subscribe_image","mb-0",)}>
+                                <YogaImageComponent   src={strapiApi.getImageUrl(imageFile.url)} alt=""/>
                             </figure>
                         </div>
                     </div>