feat: align the NewsDetail page style with the related contents on the Search page

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

@@ -1,4 +1,4 @@
-import NewsDetail from "../../../components/NewsDetail";
+import NewsDetail from "../../../components/NewsDetailPage/NewsDetail";
 import { VALIDATED_ENV } from "../../../lib/constants";
 
 async function getNewsData(id: string) {

ui/components/NewsDetailPage/ContextItem.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import { ReactMarkdown } from "@/components/Markdown";
+import PreviewNewsDetail from "./PreviewNewsDetail";
+
 interface ContextItemProperties {
   item: {
     name: string;
@@ -19,12 +21,14 @@ interface ContextItemProperties {
       contentUrl: string;
       thumbnail: { contentUrl: string; width: number; height: number };
     };
+    article?: string;
+    score?: number;
   };
 }
 
 const ProviderInfo: React.FC<{ name: string; date: string }> = ({ name, date }) => (
-  <div className="absolute -bottom-3 right-0 text-sm text-gray-700 dark:text-gray-300 flex items-end z-50">
-    <div className="relative z-50 dark:bg-slate-900 flex items-center">
+  <div className="absolute -bottom-3 right-0 text-sm text-gray-700 dark:text-gray-300 flex items-end">
+    <div className="relative dark:bg-slate-900 flex items-center">
       <span className="truncate max-w-xs">{name}</span>
       <span className="truncate max-w-xs text-xs text-gray-500 dark:text-gray-400 pl-3">{date}</span>
     </div>
@@ -32,16 +36,17 @@ const ProviderInfo: React.FC<{ name: string; date: string }> = ({ name, date })
 );
 
 const ContextItem: React.FC<ContextItemProperties> = ({ item }) => {
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false);
+
+  const togglePreview = () => {
+    setIsPreviewVisible(!isPreviewVisible);
+  };
+
   return (
-    <a
-      href={item.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="block no-underline text-black dark:text-white"
-    >
+    <>
       <div
-        className="bg-gray-200 dark:bg-slate-900 rounded-lg px-6 py-2 ring-1 items-stretch h-56
-      ring-slate-900/5 shadow-xl flex flex-row cursor-pointer hover:scale-95 transition-transform duration-300"
+        onClick={togglePreview}
+        className="no-underline text-black dark:text-white bg-gray-200 dark:bg-slate-900 rounded-lg px-6 py-2 ring-1 items-stretch h-56 ring-slate-900/5 shadow-xl flex flex-row cursor-pointer hover:scale-95 transition-transform duration-300"
       >
         <div className="w-40 h-40 flex-shrink-0">
           {item.image ? (
@@ -64,15 +69,17 @@ const ContextItem: React.FC<ContextItemProperties> = ({ item }) => {
         </div>
         <div className="flex flex-col items-stretch relative h-48">
           <div className="flex justify-start max-w-xl">
-            <h4 className="font-bold text-white truncate">{item.name}</h4>
+            <h4 className="font-bold text-black dark:text-white truncate">{item.name}</h4>
           </div>
           <div className="max-32 overflow-hidden">
-            <ReactMarkdown text={item.description} className="text-slate-500 dark:text-slate-400 line-clamp-3" />
+            <ReactMarkdown text={item.description} className="text-gray-700 dark:text-gray-300 line-clamp-3" />
           </div>
           <ProviderInfo name={item.provider[0].name} date={new Date(item.datePublished).toLocaleDateString()} />
         </div>
       </div>
-    </a>
+
+      {isPreviewVisible && <PreviewNewsDetail item={item} togglePreview={togglePreview} />}
+    </>
   );
 };
 

ui/components/NewsDetailPage/PreviewNewsDetail.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import Image from "next/image";
+import { ReactMarkdown } from "@/components/Markdown";
+
+interface ContextItemProperties {
+  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 };
+    };
+    article?: string;
+    score?: number;
+  };
+  togglePreview: () => void; // Add togglePreview prop
+}
+
+const PreviewNewsDetail: React.FC<ContextItemProperties> = ({ item, togglePreview = () => {} }) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 p-8">
+      <div className="bg-white dark:bg-slate-800 p-8 justify-center rounded-lg overflow-hidden relative w-4/5 h-4/5">
+        <div className="flex justify-between items-start">
+          <h2 className="truncate">{item.name}</h2>
+          <button onClick={togglePreview} className="p-2 rounded focus:outline-none">
+            <span className="text-4xl font-bold">&times;</span>
+          </button>
+        </div>
+        <ReactMarkdown className="overflow-y-auto h-2/3 mb-8" text={item.article || ""} />
+        <a
+          href={item.url}
+          className="absolute bottom-2 right-2 block no-underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Visit
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default PreviewNewsDetail;