ch

src/pages/national/[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&filter[category][_eq]=national');
+  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&filter[category][_eq]=national');
+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>

src/pages/national/index.astro

@@ -0,0 +1,56 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Footer from '../../components/Footer.astro';
+const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=national');
+const dataJSON = await fetchData.json();
+const data = dataJSON.data;
+// const imageData = data.image;
+// const data = fetchDataJSON.data;
+// console.log()
+---
+
+<Layout title="Barta News">
+	<main>
+		<section class="container mx-auto px-4">
+			<div class="my-16">
+				<span class="text-[#780a0a] font-bold" id="pageName"></span>
+				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
+			</div>
+				<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+						<div class="flex flex-col">
+							<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<h2 class="text-lg line-clamp-1">{items.title}</h2>
+							<img class="aspect-video	" src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
+							<div class="h-[100px] overflow-y-hidden">
+								<p id="" set:html={items.content}></p>		
+							</div>
+						</div>
+						<div class="flex justify-end">
+							<a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
+						</div>			
+					</div>
+					)}
+				</div>
+				<!-- <div class="flex flex-col">
+					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
+					<div class="flex flex-col border-2 gap-6 p-6">
+						<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
+						<h2 class="text-lg">{items.title}</h2>
+						<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
+					</div>
+					)}
+				</div> -->
+		</section>
+	</main>
+	<Footer />
+</Layout>
+<script is:inline>
+	const pageName = window.location.href.split('/')[3];
+	document.getElementById('pageName').innerHTML = '>&nbsp;' + pageName
+	// console.log(pageName)
+</script>
+<style>
+
+</style>