Add initial news

src/app/news/page.tsx

@@ -1,41 +1,74 @@
 'use client';
 
 import { Search } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-// TODO: add source with little profile pic of cnbc, bloomberg, etc.
-
 export interface News {
   id: string;
   title: string;
   summary: string;
+  description: string;
 }
 
-const mockNewsData: News[] = [
+const API_BASE_URL = process.env.NEXT_PUBLIC_AWS_DB_API_URL || '';
-  {
+const API_URL = `${API_BASE_URL}?queryType=joint&num_results=20`;
-    "id": "_TSLA2025OUTLOOK",
+const API_KEY = process.env.NEXT_PUBLIC_AWS_DB_API_KEY || '';
-    "title": "Tesla faces market challenges but bets on AI and autonomy",
-    "summary": "Tesla's stock has been volatile, currently at $279.17, after a 40% decline from recent highs. Revenue growth remains stagnant, and U.S. EV market share has dropped to 44%. Elon Musk's political engagements may be affecting brand perception, with Tesla registrations in Germany falling 76%. Despite challenges, Tesla is investing in AI, robotics, and autonomous driving, aiming to launch Full Self-Driving in Austin by June 2025 and the Cybercab ride-hailing vehicle by 2026. Analysts are divided—Morgan Stanley sees growth potential, while Bank of America has lowered its price target."
-  }
-  ,
-  { id: '_4dn88SBPLM1', title: 'Tech giants announce a new AI breakthrough', summary: 'Tech giants announce a new AI breakthrough.' },
-  { id: '_4dn88SBPLM2', title: 'Sports update: Local team secures championship win.', summary: 'Sports update: Local team secures championship win.' },
-  { id: '_4dn88SBPLM3', title: 'Market trends: Stocks surge after latest reports.', summary: 'Market trends: Stocks surge after latest reports.' },
-  { id: '_4dn88SBPLM4', title: 'Entertainment: Upcoming movies and releases for this year.', summary: 'Entertainment: Upcoming movies and releases for this year.' },
-];
 
-const NewsPage = () => {
+const NewsPageContent = () => {
-  const [news] = useState<News[]>(mockNewsData);
+  const [news, setNews] = useState<News[]>([]);
   const [expanded, setExpanded] = useState<{ [key: string]: boolean }>({});
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchNews = async () => {
+      try {
+        const response = await fetch(API_URL, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': API_KEY,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch news: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        console.log("API Response:", data); // Debugging: Log the API response
+
+        // Convert API response into News format
+        const formattedNews = data.result.map((item: any) => ({
+          id: item[0],         // Video ID (used in YouTube links)
+          title: item[1],      // News title
+          description: item[3], // Short description
+          summary: item[4],    // Full summary (for Show More)
+        }));
+
+        setNews(formattedNews);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An unknown error occurred');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchNews();
+  }, []);
 
   const toggleSummary = (id: string) => {
     setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
   };
 
+  if (loading) return <p className="text-center text-lg">Loading news...</p>;
+  if (error) return <p className="text-center text-lg text-red-500">Error: {error}</p>;
+
   return (
-    <div className="max-w-4xl mx-auto">
+    <div className="max-w-screen-xl mx-auto px-4">
       <div className="flex flex-col pt-4">
         <div className="flex items-center">
           <Search />
@@ -48,33 +81,31 @@ const NewsPage = () => {
         {news.map((item) => (
           <div
             key={item.id}
-            className="rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 bg-white dark:bg-gray-800 overflow-hidden"
+            className="w-full max-w-6xl mx-auto px-6 py-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 bg-white dark:bg-gray-800 overflow-hidden"
           >
-            {/* Construct YouTube URL dynamically */}
+            <div className="flex flex-col lg:flex-row items-start space-y-4 lg:space-y-0 lg:space-x-4 pt-6">
-
-            <div className="flex items-start space-x-4 pt-6">
               {/* Thumbnail on the Left */}
-              <div className="w-1/4 aspect-[16/9] relative">
+              <div className="w-1/2 aspect-video">
-                <Link href={`https://www.youtube.com/watch?v=${item.id}`} target="_blank" className="block">
+                <iframe
-                  <Image
+                  width="100%"
-                    src="/placeholder1.jpg"
+                  height="100%"
-                    alt="placeholder"
+                  src={`https://www.youtube.com/embed/${item.id}`}
-                    fill
+                  title={item.title}
-                    className="rounded-lg object-cover"
+                  allowFullScreen
-                  />
+                  className="rounded-lg"
-                </Link>
+                ></iframe>
               </div>
 
               {/* Text on the Right */}
               <div className="flex-1 pt-2">
                 <h2 className="text-xl font-bold text-black dark:text-white">{item.title}</h2>
-
+                <p 
-                {/* Sliced Summary */}
+                  className={`text-lg text-gray-500 dark:text-gray-400 mt-2 overflow-hidden ${
-                <p className="text-lg text-gray-500 dark:text-gray-400 mt-2">
+                    expanded[item.id] ? '' : 'line-clamp-3'
-                  {expanded[item.id] ? item.summary : `${item.summary.slice(0, 100)}...`}
+                  }`}
+                >
+                  {expanded[item.id] ? item.description : `${item.description.slice(0, 120)}...`}
                 </p>
-
-                {/* Toggle Button */}
                 <button
                   className="mt-2 text-blue-500 hover:text-blue-700 text-md font-semibold"
                   onClick={() => toggleSummary(item.id)}
@@ -83,6 +114,10 @@ const NewsPage = () => {
                 </button>
               </div>
             </div>
+
+            {expanded[item.id] && (
+              <p className="text-md text-gray-500 dark:text-gray-400 mt-2">{item.summary}</p>
+            )}
           </div>
         ))}
       </div>
@@ -90,4 +125,12 @@ const NewsPage = () => {
   );
 };
 
+const NewsPage = () => {
+  return (
+    <>
+        <NewsPageContent />
+    </>
+  );
+};
+
 export default NewsPage;