ch

src/pages/[id].astro

@@ -0,0 +1,34 @@
+---
+import Layout from '../layouts/Layout.astro';
+export async function getStaticPaths() {
+  const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published');
+  const data = await response.json();
+  const finalData = data.data.map((n: { slug: string | undefined; })=>{
+      return {params: {id:n.slug}}
+  })
+  return finalData;
+}
+const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published');
+const data = await response.json();
+const { id } = Astro.params;
+const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
+const items  = data.data[idx];
+console.log(data.data[idx])
+---
+<Layout title={items.title}>
+    <main>
+        <section class="container mx-auto px-4 mt-16">
+            <div class="flex flex-col">
+                <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+                <h2 class="text-xl py-2">{items.title}</h2>
+                <img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
+                <p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
+            </div>
+        </section>
+    </main>
+</Layout>
+<style>
+  section > div > p > p {
+    text-align: justify;
+  }
+</style>