teenybeanspreschoolcurricul.../src/pages/blog/[id].astro

93 lines
4.8 KiB
Plaintext

---
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const response = await fetch('https://management.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum');
const data = await response.json();
// console.log(finalData)
const finalData = data.data.map((n: { slug: string | undefined; })=>{
return {params: {id:n.slug}}
})
// console.log(finalData)
return finalData;
}
const response = await fetch('https://management.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum');
const data = await response.json();
const { id } = Astro.params;
console.log("id")
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
---
<Layout title="">
<main>
<div class="grid grid-cols-1 xl:grid-cols-6 xl:px-24">
<div class="grid xl:col-span-4 container mx-auto">
<div class="bg-white mt-3">
<!-- <h2 class="ml-28 text-4xl">Loading ...</h2> -->
<div>
<div ></div>
<!-- <p>{{ page[0].meta }}</p> -->
<figure class=" p-4 xl:pl-20 2xl:pl-32">
<h1 class="text-3xl lg:text-4xl font-semibold text-color-1 py-4">{data.data[idx].title}</h1>
<!-- <img class="w-full" v-if="page[0].img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].img" alt="" style="width:100%;"> -->
<!-- <img src="" alt="">{data.data[idx].img} -->
<img src={ 'https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[idx].img} alt="image description" style="width:100%;"/>
<div class="pt-6 space-y-4">
<blockquote>
</blockquote>
<figcaption class="font-medium">
<!-- <div class="text-color-2 text-justify text-lg" >{{page[0].preview_text }}</div> -->
<div class="text-color-2 text-lg text-justify" set:html={data.data[idx].preview_text}></div>
</figcaption>
</div>
</figure>
<!-- <div v-html="page[0].content" class="container mx-auto">
</div> -->
</div>
</div>
</div>
<section class="z-50">
<div>
<a href="#" target="_blank" style=" position: fixed; top: 200px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/link.svg" alt="">
</a>
<a href="https://api.whatsapp.com/send/?phone=919163646431&text&app_absent=0" target="_blank" style=" position: fixed; top: 260px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/whatsapp.svg" alt="">
</a>
<a href="#" target="_blank" style=" position: fixed; top: 320px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/facebook.svg" alt="">
</a>
<a href="#" target="_blank" style=" position: fixed; top: 380px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
<img class="" src="/img/svg/twitterw.svg" alt="">
</a>
</div>
</section>
<section class="container z-40">
<div class="grid xl:col-span-2 place-items-center">
<div class="xl:fixed top-40 xl:right-24">
<!-- <BlogGetinTouch client:visible/> -->
</div>
</div>
</section>
</div>
<!-- <section class="container mx-auto py-20 px-4 xl:px-24">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit ">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqAdministrators in faqAdministrators" :key="faqAdministrators.id" class="">
<details>
<summary>
<div class="flex inline-flex cursor-pointer" v-if="faqAdministrators"> &nbsp;{data.data[idx].title}</div>
</summary>
<div set:html="faqAdministrators.content"></div>
</details>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section> -->
</main>
</Layout>