dwd-projects
/
teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SingleTheme

master
Suvodip Ghosh 2023-02-20 23:53:54 +05:30
parent f4ba61c346
commit d4bae7f6ba
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/themes/[id].astro
View File

@ -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;
@ -59,12 +70,12 @@ import Footer from "../../components/Footer.vue";
</div>
</div>
</section>
<!-- section Celebretion Ideas -->
<!-- section Celebretion Ideas -->
<section class="container mx-auto xl:px-24 py-16 px-4">
<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=""/>