fix the PR gated

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

@@ -1,7 +1,6 @@
 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);
 

ui/components/NewsDetail.tsx

@@ -1,13 +1,38 @@
 import React from "react";
 import ContextItem from "./ContextItem";
 
+interface ContextItemType {
+  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;
+    };
+  };
+  article?: string;
+  score?: number;
+}
+
 interface NewsDetailProps {
   news: {
     title: string;
     sections: {
       title: string;
       content: string;
-      context: any[];
+      context: ContextItemType[];
     }[];
   };
 }

ui/components/NewsPage.tsx

@@ -52,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>
@@ -77,7 +77,7 @@ const NewsPage = () => {
             ))
           )}
         </div>
-      )}
+      ))}
     </div>
   );
 };