SingleTheme

src/pages/themes/[id].astro

@@ -2,7 +2,18 @@
 import Layout from "../../layouts/Layout.astro";
 import Menu from "../../components/Menu.astro";
 
-const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?filter[status][_eq]=published');
+export async function getStaticPaths() {
+  const response = await fetch('https://management.beanstalkedu.com/items/themes');
+  const data = await response.json();
+  const finalData = data.data.map((n: { theme_slug: string | undefined; })=>{
+      return {params: {id:n.theme_slug}}
+  })
+  return finalData;
+}
+
+const { id } = Astro.params;
+
+const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?filter[theme_slug][_eq]='+id);
 const data = await response.json();
 const themes = data.data;
 
@@ -64,7 +75,7 @@ import Footer from "../../components/Footer.vue";
                 <div class="h1-text text-blue-700 font-semibold">Celebration Ideas </div>
                 <div class="text-2xl text-justify text-color-2">{themes[0].celebration_ideas_text}</div>
                 <div v-if="ideas" class="grid place-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 ">
-                        {tciRespData.map((data) => 
+                        {tciRespData.map((data: { celebration_ideas_img: string | undefined; celebration_ideas_title: string | undefined; celebration_ideas_body_text: string | undefined; title: string | undefined; }) => 
                             <div class="flex relative">
                                 <img v-if="ida.celebration_ideas_img" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.celebration_ideas_img} alt="" class="pt-4 rounded-tl-xl rounded-br-xl shadow-xl" />
                                 <div class="absolute top-10 left-8 text-2xl text-color-1 font-semibold">{data.celebration_ideas_title}
@@ -85,7 +96,7 @@ import Footer from "../../components/Footer.vue";
                 <div class="h1-text text-blue-700 font-semibold">Worksheets</div>
                 <div class="text-2xl text-justify text-color-2" >{themes[0].worksheets_text}</div>
                 <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6">
-                        {twsRespData.map((data) =>
+                        {twsRespData.map((data: { title: string | undefined; theme_worksheets_img: string | undefined; file: string | undefined; }) =>
                         <div class="flex relative p-4">
                             <img src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.theme_worksheets_img} alt="" class="w-80 shadow-2xl rounded-tl-lg rounded-br-lg" />
                             <div class="absolute bottom-10 left-20">
@@ -112,7 +123,7 @@ import Footer from "../../components/Footer.vue";
             </section>
             <ThemesVideos client:visible/>
             <ThemesAudioBook client:visible/>
-            <section class="container mx-auto pt-16 xl:px-24 px-4">
+            <!-- <section class="container mx-auto pt-16 xl:px-24 px-4">
               <h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>
               <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{themes[0].celebration_stories_text}</h1>
               <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 py-10 px-4 gap-12">
@@ -126,14 +137,14 @@ import Footer from "../../components/Footer.vue";
                       </div>
                   )}
               </div>
-          </section>
+          </section> -->
           <SubmitCelebration client:visible/>
           <!-- section youtube -->
-        <section class="container mx-auto py-16 mt-20 px-4 xl:px-24" >  
+        <section class="container mx-auto pt-20 px-4 xl:px-24" >  
             <div class="h1-text text-blue-700 font-semibold">YouTube Videos for your reference </div>
             <div class="text-2xl text-justify text-color-2">{themes[0].youtube_text}</div>
             <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 pt-4">
-              {ytvRespData.map((data) =>
+              {ytvRespData.map((data: { youtube_id: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) =>
                 <div class="p-2">
                     <a href={'https://www.youtube.com/watch?v='+data.youtube_id}>
                         <div>
@@ -149,7 +160,7 @@ import Footer from "../../components/Footer.vue";
         <section class="container mx-auto px-4 xl:px-24 mb-16">
             <h2 class="h1-text text-center text-color-1 py-16 font-semibold"> Other Themes  </h2>
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-10">
-              {allthemesRespData.map((data) =>
+              {allthemesRespData.map((data: { theme_slug: string | undefined; theme_icon: string | undefined; }) =>
                 <div class="grid">
                         <a href={'/themes/'+ data.theme_slug}>
                             <img class="rounded-lg shadow-2xl" src={'https://curriculum-app-api.beanstalkedu.com/assets/' + data.theme_icon} alt=""/>