New news detail json

ui/app/news/[id]/layout.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function NewsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <Link href="/" className="text-blue-500 hover:underline mb-4 inline-block">
+        &larr; Back to News List
+      </Link>
+      {children}
+    </div>
+  );
+}

ui/app/news/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { fetchNewsData } from "../../../lib/fetchNewsData";
+import NewsDetail from "../../../components/NewsDetail";
+
+
+export default async function NewsPage({ params }: { params: { id: string } }) {
+  const newsData = await fetchNewsData(params.id);
+
+  if (!newsData) {
+    return <div>News not found</div>;
+  }
+
+  return <NewsDetail news={newsData} />;
+}

ui/components/ContextItem.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Image from "next/image";
+
+interface ContextItemProps {
+  item: {
+    name: string;
+    url: string;
+    description: string;
+    provider: { name: string; image?: { thumbnail: { contentUrl: string } } }[];
+    datePublished: string;
+    image?: {
+      contentUrl: string;
+      thumbnail: { contentUrl: string; width: number; height: number };
+    };
+  };
+}
+
+const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
+  return (
+    <div className="border p-4 rounded-lg mb-4">
+      <h4 className="font-bold">{item.name}</h4>
+      {item.image && (
+        <Image
+          src={item.image.contentUrl}
+          alt={item.name}
+          width={item.image.thumbnail.width}
+          height={item.image.thumbnail.height}
+          className="my-2 rounded"
+        />
+      )}
+      <p>{item.description}</p>
+      <div className="text-sm text-gray-500 mt-2">
+        {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
+      </div>
+      <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
+        Read more
+      </a>
+    </div>
+  );
+};
+
+export default ContextItem;

ui/components/NewsDetail.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import ContextItem from "./ContextItem";
+
+interface NewsDetailProps {
+  news: {
+    title: string;
+    sections: {
+      title: string;
+      content: string;
+      context: any[];
+    }[];
+  };
+}
+
+const NewsDetail: React.FC<NewsDetailProps> = ({ news }) => {
+  return (
+    <article className="prose lg:prose-xl">
+      <h1>{news.title}</h1>
+      {news.sections.map((section, index) => (
+        <section key={index}>
+          <h2>{section.title}</h2>
+          <p>{section.content}</p>
+          <div className="mt-4">
+            <h3>Related Context:</h3>
+            {section.context.map((item, i) => (
+              <ContextItem key={i} item={item} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </article>
+  );
+};
+
+export default NewsDetail;

ui/components/NewsPage.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Newspaper } from "lucide-react";
+import Link from "next/link";
 
 interface NewsItem {
   id: string;
@@ -51,7 +52,7 @@ const NewsPage = () => {
         <div className="flex flex-row items-center justify-center min-h-screen">
           <p className="text-black/70 dark:text-white/70 text-sm">Loading news...</p>
         </div>
-      ) : error ? (
+      ) : (error ? (
         <div className="flex flex-col items-center justify-center min-h-screen">
           <p className="text-red-500 text-sm mb-2">Failed to load news.</p>
           <p className="text-red-500 text-xs">{error}</p>
@@ -61,15 +62,22 @@ const NewsPage = () => {
           {news.length === 0 ? (
             <p className="text-black/70 dark:text-white/70 text-sm text-center">No news available.</p>
           ) : (
-            news.map((item) => (
-              <div key={item.id} className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4">
-                <h3 className="text-black dark:text-white lg:text-xl font-medium">{item.title}</h3>
+            news.map(item => (
+              <div
+                key={item.id}
+                className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4"
+              >
+                <Link href={`/news/${item.id}`}>
+                  <h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline cursor-pointer">
+                    {item.title}
+                  </h3>
+                </Link>
                 <p className="text-black/70 dark:text-white/70 text-sm">{item.summary}</p>
               </div>
             ))
           )}
         </div>
-      )}
+      ))}
     </div>
   );
 };

ui/lib/fetchNewsData.ts

@@ -0,0 +1,9 @@
+export async function fetchNewsData(id: string) {
+  const response = await fetch(
+    `https://raw.githubusercontent.com/newspedia-crew/newspedia-web/intern-change/public/data/${id}.json`,
+  );
+  if (!response.ok) {
+    return null;
+  }
+  return response.json();
+}

ui/next.config.js

@@ -2,14 +2,20 @@
 // eslint-disable-next-line no-undef, @typescript-eslint/no-var-requires
 const webpack = require("webpack");
 
-/** @type {import('next').NextConfig} */
+/** @type {import("next").NextConfig} */
 const nextConfig = {
   images: {
     remotePatterns: [
       {
-        hostname: "s2.googleusercontent.com",
+        protocol: "https",
+        hostname: "**",
+      },
+      {
+        protocol: "http",
+        hostname: "**",
       },
     ],
+    domains: ["raw.githubusercontent.com"],
   },
 
   webpack: (config, { isServer }) => {
@@ -36,4 +42,4 @@ const nextConfig = {
 };
 
 // eslint-disable-next-line no-undef
-module.exports = nextConfig;
+module.exports = nextConfig;