[yoga-13] add listing component to text-with-image components

yoga-app/src/app/page.tsx

@@ -30,7 +30,6 @@ export default async function Home() {
                 feedbacks
         } = pageData;
 
-        console.info("Home page data", pageData);
   return (
       <>
               { header && <MainHeaderComponent config={header} common={common} /> }

yoga-app/src/app/seed/route.ts

@@ -110,10 +110,8 @@ export async function GET() {
   //     'Uncomment this file and remove this line. You can delete this file when you are finished.',
   // });
   try {
-    console.info("get request")
     strapiApi.getHomePage();
 
-    console.info("begin")
     await connectionPool.query(`BEGIN`);
     await seedUsers();
     await seedCustomers();

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

@@ -10,7 +10,6 @@ export default function AchievementsComponent({
         title,header,description
     }
                                               }: Props){
-    console.info("achievements",achievements)
     return (
         <section className="achievement_section">
             <div className="container">

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

@@ -0,0 +1,69 @@
+import React from 'react';
+
+interface ListingComponentProps {
+  text?: string;
+}
+
+const ListingComponent: React.FC<ListingComponentProps> = ({ text }) => {
+  if (!text) {
+    return null;
+  }
+
+  const lines = text.split('\n');
+  const elements: React.ReactNode[] = [];
+  let currentParagraph: string[] = [];
+  let currentList: React.ReactNode[] = [];
+
+  const flushParagraph = () => {
+    if (currentParagraph.length > 0) {
+      elements.push(<p key={elements.length}>{currentParagraph.join('\n')}</p>);
+      currentParagraph = [];
+    }
+  };
+
+  const flushList = () => {
+    if (currentList.length > 0) {
+      elements.push(<ul key={elements.length}>{currentList}</ul>);
+      currentList = [];
+    }
+  };
+
+  let currentListItemContent: string[] = [];
+
+  const flushListItem = () => {
+      if(currentListItemContent.length > 0) {
+          currentList.push(<li key={currentList.length}>{currentListItemContent.join('\n')}</li>);
+          currentListItemContent = [];
+      }
+  }
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+
+    if (trimmedLine.startsWith('- ') || trimmedLine.startsWith('* ')) {
+      flushParagraph(); // End any ongoing paragraph
+      flushListItem(); // End previous list item
+      currentListItemContent.push(trimmedLine.substring(2));
+    } else if (trimmedLine === '') {
+      flushListItem();
+      flushList(); // An empty line ends the list
+    } else {
+      if (currentList.length > 0 || currentListItemContent.length > 0) {
+        // This line belongs to the current list item
+        currentListItemContent.push(line);
+      } else {
+        // This is a paragraph line
+        flushList();
+        currentParagraph.push(line);
+      }
+    }
+  }
+
+  flushListItem();
+  flushList();
+  flushParagraph();
+
+  return <>{elements}</>;
+};
+
+export default ListingComponent;

yoga-app/src/components/mainHeaderComponent.tsx

@@ -24,9 +24,6 @@ const MainHeaderComponent = ({ config: {
     const logoImageFile: StrapiFile = (common?.logoImage)  as StrapiFile;
     const logoImageSrc = logoImageFile ? strapiApi.getImageUrl(logoImageFile.url) : undefined;
 
-    console.info("MainHeaderComponent imageSrc",image, imageSrc);
-    // console.info("MainHeaderComponent logoImgSrc",image, logoImageSrc);
-
     return (
         <div className="banner-section-outer">
             <header>

yoga-app/src/components/our.services.component.tsx

@@ -67,7 +67,6 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
             }
         ]
     };
-    console.info(settings)
     return (
         <section className="services_section">
             <div className="container">

yoga-app/src/components/price.item.component.tsx

@@ -11,7 +11,6 @@ export function PriceItemComponent({config: {header, description, option1,option
     // there are some issues with the strapi generated types
     const iconFile: StrapiFile = icon as StrapiFile;
     const imageFile: StrapiFile = image as StrapiFile;
-    console.info("image:",strapiApi.getImageUrl(imageFile?.url));
     return (
         <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
             <div className="pricing_plans_box_content">

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

@@ -25,8 +25,6 @@ const SubHeaderComponent = ( {
         logoImageSrc  =   strapiApi.getImageUrl(logoImageFile?.url) ;
     }
 
-    console.info("image", logoImageSrc);
-
     return (
         <div className="sub-banner-section">
              <Nav menuItems={MAIN_MENU} imageSrc={logoImageSrc} />

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

@@ -1,5 +1,5 @@
 import TextWithRightImage from "@/components/text.with.right.image.component";
-import TextWithLeftImage from "@/components/text.with.right.left.component";
+import TextWithLeftImage from "@/components/text.with.left.image.component";
 import {YogaTextWithImageComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-text-with-image-component";
 
 export interface Props{

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

@@ -2,6 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaTextWithImageComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-text-with-image-component";
 import {StrapiFile} from "@/types/types";
 import strapiApi from "@/api/strapi/strapi-api";
+import ListingComponent from "@/components/listing.component";
 
 export interface Props{
     config: YogaTextWithImageComponent_Plain
@@ -29,7 +30,7 @@ export default function TextWithLeftImage ({config: {
                             <div className="vision_content">
                                 <h5>{title}</h5>
                                 <h2>{header}</h2>
-                                <p>{description}</p>
+                                <ListingComponent text={description} />
                                 <div className="btn_wrapper">
                                     {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
                                 </div>

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

@@ -2,6 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaTextWithImageComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-text-with-image-component";
 import {StrapiFile} from "@/types/types";
 import strapiApi from "@/api/strapi/strapi-api";
+import ListingComponent from "./listing.component";
 
 export interface Props{
     config: YogaTextWithImageComponent_Plain
@@ -22,7 +23,7 @@ export default function TextWithRightImage ({config: {
                             <div className="mission_content">
                                 <h5>{title}</h5>
                                 <h2>{header}</h2>
-                                <p>{description}</p>
+                                <ListingComponent text={description} />
                                 <div className="btn_wrapper">
                                     {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
                                 </div>