[yoga-15] improve service list rendering

yoga-app/src/components/block.with.image.component.tsx

@@ -5,7 +5,7 @@ import BlockWithLeftImage from "@/components/block.with.left.image.component";
 
 
 export interface BlockWithImageComponentProps {
-    id: number;
+    id?: string;
     title?: string;
     header?: string;
     block: BlocksContent;

yoga-app/src/components/block.with.left.image.component.module.css

@@ -0,0 +1,9 @@
+.leftImage {
+    border-top-left-radius: 200px;
+    border-bottom-right-radius: 200px;
+    margin: -150px 12px 12px 0;
+}
+
+.blockLeftVisionContent {
+    padding-left: 0;
+}

yoga-app/src/components/block.with.left.image.component.tsx

@@ -1,27 +1,31 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import NextBlocksRenderer from "@/components/next.blocks.renderer";
 import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
-
+import styles from './block.with.left.image.component.module.css';
+import clsx from "clsx";
 
 
 export default function BlockWithLeftImage (  {
-    title,header,image,block,button
+    id,title,header,  image: {
+        url,
+    },block,button
 } : BlockWithImageComponentProps){
 
 
-
     return (
-        <section className="vision_section">
+        <section className="vision_section" id={id}>
             <div className="container">
                 <div className="vision_box">
                     <div className="row">
                         <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                            <div className="vision_image">
+
-                                <figure className="mb-0"><YogaImageComponent src={image.url} alt="" className="img-fluid" /></figure>
                         </div>
+                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
+                            <div className={ clsx("vision_content",styles.blockLeftVisionContent)}>
+                                {url && <div className="vision_image">
+                                    <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
                                 </div>
-                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
+                                }
-                            <div className="vision_content">
                                 <h5>{title}</h5>
                                 <h2>{header}</h2>
                                 <NextBlocksRenderer content={  block } />

yoga-app/src/components/block.with.right.image.component.module.css

@@ -1,5 +1,9 @@
 .rightImage {
-    border-top-left-radius: 60px;
+    border-top-left-radius: 200px;
-    border-bottom-right-radius: 60px;
+    border-bottom-right-radius: 200px;
         margin: -150px 0 12px 12px;
 }
+
+.blockRightMissionContent {
+    padding-right: 0;
+}

yoga-app/src/components/block.with.right.image.component.tsx

@@ -4,35 +4,41 @@ 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 ({
+export default function BlockWithRightImage({
-                                                title,header, block,button,  image: {
+                                              id,  title, header, block, button, image: {
         url,
-    } ,
+    },
-                                            }: BlockWithImageComponentProps){
+                                            }: BlockWithImageComponentProps) {
 
 
     return (
-        <section className="mission_section">
+        <section className="mission_section" id={id}>
             <div className="container">
                 <div className="mission_box">
                     <div className="row">
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
-                            <div className="mission_content">
+                            <div className={ clsx("mission_content",styles.blockRightMissionContent)}>
-                                <div className="mission_image">
+                                {
-                                    <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-right", styles.rightImage)} /></figure>
+                                    url && <div className="mission_image">
+                                        <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 } />
+                                <NextBlocksRenderer content={block}/>
                                 <div className="btn_wrapper">
-                                    {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
+                                    {button && <a href={button.link}
+                                                  className="text-decoration-none read_more_btn">{button.label}</a>}
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <figure className="mission_right_shape right_shape mb-0">
-                    <YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid" />
+                    <YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>

yoga-app/src/components/single.service.component.tsx

@@ -10,17 +10,20 @@ export interface Props {
     index: number
 }
 
-const SingleService = ({config,index}: Props) => {
+const SingleService = ({config, index}: Props) => {
-    if (!config || !config.article || !config.articleImage) {
+    if (!config || !config.article) {
         return null; // or some fallback UI
     }
 
-    const {article, articleImage, id, header } = config;
+    const {article, articleImage, id, header} = config;
+    let imageUrl: string | undefined = undefined;
     const strapiFile = articleImage as StrapiFile;
-      const  imageUrl = strapiApi.getImageUrl(strapiFile?.url);
+    imageUrl = strapiApi.getImageUrl(strapiFile?.url);
 
     return (
-        <BlockWithImageComponent id={id} block={article} image={{ position: index %2 ? ImagePosition.Left : ImagePosition.Right, url:imageUrl}}  header={header} />
+        <BlockWithImageComponent id={id} block={article}
+                                 image={{position: index % 2 ? ImagePosition.Left : ImagePosition.Right, url: imageUrl}}
+                                 header={header}/>
     );
 }
 

yoga-app/src/types/types.ts

@@ -21,7 +21,7 @@ export interface ButtonConfig{
 
 export interface ImageConfig{
     position: ImagePosition,
-    url: string,
+    url?: string,
     alt?: string,
     width?: number,
     height?: number,

yoga-app/src/util/sorting.ts

@@ -3,5 +3,5 @@ import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/y
 export function sortServicesByPriority(a: YogaSingleService_Plain, b: YogaSingleService_Plain) {
   const priorityA = a.priority ?? 0;
   const priorityB = b.priority ?? 0;
-  return priorityA - priorityB;
+  return priorityB - priorityA;
 }