add service detail page

yoga-app/src/api/strapi/query/service.json

@@ -1,7 +1,7 @@
 {
   "fields": ["*"],
   "populate": {
-    "subscribe": {
+    "subscribeNow": {
       "fields": ["*"]
     },
     "footer": {

yoga-app/src/api/strapi/strapi-client.ts

@@ -14,6 +14,7 @@ class StrapiClient{
         return  '/image/'+ imagePath;
     }
     public async  httpGet(path: string){
+        console.info("httpGet", path);
         return await httpClient.httpGet(this.strapiUrl + path);
     }
     public async httpGetJson<T>(url: string): Promise<Payload<T>>{

yoga-app/src/app/services/[slug]/page.module.css

@@ -0,0 +1,3 @@
+.article h1{
+    color: black;
+}

yoga-app/src/app/services/[slug]/page.tsx

@@ -1,37 +1,43 @@
 import React from "react";
 import strapiApi from "@/api/strapi/strapi-api";
 import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
+import SubscribeComponent from "@/components/subscribe.component";
+import FooterComponent from "@/components/footer.component";
+import SubHeaderComponent from "@/components/subHeader.component";
+import AosComponent from "@/components/aos.component";
+import styles from './page.module.css'
+import NextBlocksRenderer from "@/components/next.blocks.renderer";
+
 export default async function ServiceArticlePage({params}: {
     params: Promise<{ slug: string }>
 }) {
     const {slug} = await params
-    const {footer= undefined, subscribeNow = undefined} = await strapiApi.getServicePage();
+    const {header, description, footer, subscribeNow} = await strapiApi.getServicePage();
     const servicesByName = await strapiApi.getService(slug);
-    // return (
-    //     <>
-    //         {header && description && <SubHeaderComponent header1={header} description={description} />}
-    //         { ourServices && <OurServicesComponent  config={ourServices}  /> }
-    //         { contactUs && <ContactUsComponent contactUs={contactUs} />}
-    //         { ourSpecialities && <OurSpecialitiesComponent config={ourSpecialities} /> }
-    //         { feedbacks && <FeedbackComponent config={feedbacks} /> }
-    //         { blogs && <BlogPostsComponent config={blogs} /> }
-    //         { subscribe && <SubscribeComponent config={subscribe} /> }
-    //         { footer &&  <FooterComponent config={footer} /> }
-    //         <AosComponent />
-    //     </>
-    // );
-    console.info("slug", slug);
-    console.info("servicesByName", servicesByName);
     const selectedService = servicesByName[0];
     const article = selectedService.article;
-    console.info("article", article);
+    console.info(article);
 
     selectedService.article
     return (
         <>
-                    <BlocksRenderer content={article as BlocksContent} />
+            {selectedService && selectedService.header && selectedService.description &&
+                <SubHeaderComponent header1={selectedService.header} description={selectedService.description}/>}
+            <section className={styles.article}>
+                <div className="container">
+                    <div className={"row"}>
+                        <div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>
+                            <NextBlocksRenderer
+                                content={article as BlocksContent}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+            </section>
             {subscribeNow && <SubscribeComponent config={subscribeNow}/>}
             {footer && <FooterComponent config={footer}/>}
+            <AosComponent/>
         </>
     );
 }

yoga-app/src/components/next.blocks.renderer.tsx

@@ -0,0 +1,31 @@
+'use client';
+import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
+import strapiApi from "@/api/strapi/strapi-api";
+import React from "react";
+import YogaImageComponent from "@/components/yoga.image.component";
+
+export interface Props{
+    content: BlocksContent;
+}
+const NextBlocksRenderer = ({ content }: Props) => {
+    return  (
+    <BlocksRenderer
+        content={content}
+        blocks={{
+            image: ({image}) => {
+                console.log(image);
+                const url =  new URL(image.url);
+                return (
+                    <YogaImageComponent
+                        src={url.pathname}
+                        width={image.width}
+                        height={image.height}
+                        alt={image.alternativeText || ""}
+                    />
+                );
+            }
+        }}
+        />);
+}
+
+export default NextBlocksRenderer;