From 1616f92c16aeb5600830bd9a0fa1c5f5c47cbea6 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 25 Oct 2024 18:01:31 +0200
Subject: [PATCH] add news component

---
 src/lib/components/News.svelte                | 160 ++++++++++
 .../stocks/[tickerID]/+layout.server.ts       |   5 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |  17 --
 src/routes/stocks/[tickerID]/+page.svelte     | 173 +----------
 .../stocks/[tickerID]/news/+page.svelte       | 285 ++++++++++--------
 5 files changed, 336 insertions(+), 304 deletions(-)
 create mode 100644 src/lib/components/News.svelte

diff --git a/src/lib/components/News.svelte b/src/lib/components/News.svelte
new file mode 100644
index 00000000..43b32f39
--- /dev/null
+++ b/src/lib/components/News.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { stockTicker } from "$lib/store";
+
+  export let data;
+
+  let rawData = [];
+  let newsList = [];
+
+  const formatDate = (dateString) => {
+    // Create a date object for the input dateString
+    const inputDate = new Date(dateString);
+
+    // Create a date object for the current time in New York City
+    const nycTime = new Date().toLocaleString("en-US", {
+      timeZone: "America/New_York",
+    });
+    const currentNYCDate = new Date(nycTime);
+
+    // Calculate the difference in milliseconds
+    const difference = inputDate.getTime() - currentNYCDate.getTime();
+
+    // Convert the difference to minutes
+    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
+
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    } else if (minutes < 1440) {
+      const hours = Math.round(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else {
+      const days = Math.round(minutes / 1440);
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    }
+  };
+
+  let videoId = null;
+
+  function checkIfYoutubeVideo(link) {
+    const url = new URL(link);
+    if (url?.hostname === "www.youtube.com") {
+      const searchParams = url.searchParams;
+      searchParams.delete("t"); // Remove the "t" parameter
+      const videoIdMatch = url?.search?.match(/v=([^&]+)/);
+
+      if (videoIdMatch) {
+        return videoIdMatch[1];
+      }
+    } else {
+      return null;
+    }
+  }
+
+  function loadMoreData() {
+    const nextIndex = newsList?.length;
+    const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
+    newsList = [...newsList, ...newArticles];
+  }
+
+  $: {
+    if ($stockTicker && typeof window !== "undefined") {
+      rawData = data?.getNews;
+      newsList = rawData?.slice(0, 20) ?? [];
+    }
+  }
+</script>
+
+<div class="space-y-3 overflow-hidden">
+  <!--Start Content-->
+  <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
+    <div class="flex flex-col items-center w-full mb-3">
+      <div class="flex flex-row justify-start mr-auto items-center">
+        <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
+        <div class="flex flex-row items-center">
+          <label
+            class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
+          >
+            News
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 gap-2 pb-5">
+      {#each newsList as item}
+        <div class="w-full flex flex-col bg-[#09090B] rounded-md m-auto">
+          {#if (videoId = checkIfYoutubeVideo(item.url))}
+            <div class="w-full aspect-video mb-4">
+              <iframe
+                class="w-full h-full rounded-md border border-gray-800"
+                src={`https://www.youtube.com/embed/${videoId}`}
+                frameborder="0"
+                allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+              ></iframe>
+            </div>
+            <div class="w-full px-4 pb-4">
+              <h3 class="text-sm text-white/80 mb-2">
+                {formatDate(item?.publishedDate)} ago · {item?.site}
+              </h3>
+              <a
+                href={item?.url}
+                rel="noopener noreferrer"
+                target="_blank"
+                class="text-lg sm:text-xl font-bold text-white"
+              >
+                {item?.title}
+                <p class="text-white text-sm mt-2 font-normal">
+                  {item?.text}
+                </p>
+              </a>
+            </div>
+          {:else}
+            <div class="w-full flex flex-col sm:flex-row">
+              <a
+                href={item?.url}
+                rel="noopener noreferrer"
+                target="_blank"
+                class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+              >
+                <div class="flex-shrink-0 m-auto">
+                  <img
+                    src={item?.image}
+                    class="h-auto w-full rounded-md"
+                    alt="news image"
+                    loading="lazy"
+                  />
+                </div>
+              </a>
+              <div class="-mt-3 w-full">
+                <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
+                  {formatDate(item?.publishedDate)} ago · {item?.site}
+                </h3>
+                <a
+                  href={item?.url}
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  class="text-lg sm:text-xl font-bold text-white"
+                >
+                  {item?.title}
+                  <p class="text-white text-sm mt-2 font-normal">
+                    {item?.text}
+                  </p>
+                </a>
+              </div>
+            </div>
+          {/if}
+        </div>
+        <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
+      {/each}
+    </div>
+    {#if newsList?.length !== rawData?.length}
+      <label
+        on:click={loadMoreData}
+        class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-purple-700 bg-purple-600"
+      >
+        Load More News
+      </label>
+    {/if}
+  </div>
+</div>
diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index 61518968..2189318e 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -76,11 +76,12 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     "/next-earnings",
     "/earnings-surprise",
     "/dividend-announcement",
+    "/stock-news",
   ];
 
   const promises = [
     ...endpoints.map((endpoint) =>
-      fetchData(apiURL, apiKey, endpoint, tickerID)
+      fetchData(apiURL, apiKey, endpoint, tickerID),
     ),
     fetchWatchlist(pb, user?.id),
     //fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id),
@@ -99,6 +100,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getNextEarnings,
     getEarningsSurprise,
     getDividendAnnouncement,
+    getNews,
     getUserWatchlist,
     getCommunitySentiment,
   ] = await Promise.all(promises);
@@ -115,6 +117,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getNextEarnings,
     getEarningsSurprise,
     getDividendAnnouncement,
+    getNews,
     getUserWatchlist,
     getCommunitySentiment,
     companyName: cleanString(getStockDeck?.at(0)?.companyName),
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 4d4e823b..bb8cde3f 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -894,23 +894,6 @@ function handleTypeOfTrade(state:string)
                               : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
                           />
                         </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/news`}
-                            on:click={() => changeSection("news")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
-                            'news'
-                              ? 'text-white '
-                              : 'bg-[#09090B]'}"
-                          >
-                            News
-                          </a>
-                          <div
-                            class="{displaySection === 'news'
-                              ? 'bg-[#75D377]'
-                              : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
-                          />
-                        </li>
                       </ul>
                     </div>
 
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index a7722a5c..9fc2c7de 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -4,25 +4,10 @@
   import {
     getCache,
     setCache,
-    fomcImpactComponent,
-    corporateLobbyingComponent,
-    revenueSegmentationComponent,
-    taRatingComponent,
-    swapComponent,
-    governmentContractComponent,
-    optionsNetFlowComponent,
-    clinicalTrialComponent,
-    optionComponent,
-    failToDeliverComponent,
     screenWidth,
     displayCompanyName,
     numberOfUnreadNotification,
     globalForm,
-    varComponent,
-    shareStatisticsComponent,
-    enterpriseComponent,
-    darkPoolComponent,
-    shareholderComponent,
     isCrosshairMoveActive,
     realtimePrice,
     priceIncrease,
@@ -36,6 +21,7 @@
   } from "$lib/store";
   import { onDestroy, onMount } from "svelte";
   import BullBearSay from "$lib/components/BullBearSay.svelte";
+
   import NextEarnings from "$lib/components/NextEarnings.svelte";
   import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
   import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
@@ -1570,7 +1556,7 @@
 
           <Lazy>
             <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
+              class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
                 ?.getWhyPriceMoved?.length !== 0
                 ? ''
                 : 'hidden'}"
@@ -1581,139 +1567,19 @@
             </div>
           </Lazy>
 
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$revenueSegmentationComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/RevenueSegmentation.svelte") then { default: Comp }}
-                <svelte:component this={Comp} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/ClinicalTrial.svelte") then { default: Comp }}
+          <div
+            class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
+              ?.getNews?.length !== 0
+              ? ''
+              : 'hidden'}"
+          >
+            <Lazy
+              >{#await import("$lib/components/News.svelte") then { default: Comp }}
                 <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent
-                ? 'hidden'
-                : ''}"
+              {/await}</Lazy
             >
-              {#await import("$lib/components/VaR.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/GovernmentContract.svelte") then { default: Comp }}
-                <svelte:component this={Comp} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fomcImpactComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/FOMCImpact.svelte") then { default: Comp }}
-                <svelte:component this={Comp} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/CorporateLobbying.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/Swap.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/OptionsData.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/FailToDeliver.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <Lazy>
-            <div
-              class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/DarkPool.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
-
-          <!--Start Shareholders-->
+          </div>
+          <!--
           <Lazy>
             <div
               class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent
@@ -1725,19 +1591,8 @@
               {/await}
             </div>
           </Lazy>
+          -->
           <!--End Shareholders-->
-
-          <Lazy>
-            <div
-              class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent
-                ? 'hidden'
-                : ''}"
-            >
-              {#await import("$lib/components/TARating.svelte") then { default: Comp }}
-                <svelte:component this={Comp} {data} />
-              {/await}
-            </div>
-          </Lazy>
         </div>
       </div>
     </div>
diff --git a/src/routes/stocks/[tickerID]/news/+page.svelte b/src/routes/stocks/[tickerID]/news/+page.svelte
index 27cca39c..f931861c 100644
--- a/src/routes/stocks/[tickerID]/news/+page.svelte
+++ b/src/routes/stocks/[tickerID]/news/+page.svelte
@@ -1,159 +1,190 @@
-<script lang='ts'>
-import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
+<script lang="ts">
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    stockTicker,
+  } from "$lib/store";
 
-export let data;
+  export let data;
 
+  let rawNews = data?.getStockNews;
+  let newsList = rawNews?.slice(0, 20) ?? [];
 
+  const formatDate = (dateString) => {
+    // Create a date object for the input dateString
+    const inputDate = new Date(dateString);
 
+    // Create a date object for the current time in New York City
+    const nycTime = new Date().toLocaleString("en-US", {
+      timeZone: "America/New_York",
+    });
+    const currentNYCDate = new Date(nycTime);
 
-let rawNews = data?.getStockNews;
-let newsList = rawNews?.slice(0,20) ?? [];
+    // Calculate the difference in milliseconds
+    const difference = inputDate.getTime() - currentNYCDate.getTime();
 
-const formatDate = (dateString) => {
-// Create a date object for the input dateString
-const inputDate = new Date(dateString);
-  
-  // Create a date object for the current time in New York City
-  const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
-  const currentNYCDate = new Date(nycTime);
-  
-  // Calculate the difference in milliseconds
-  const difference = inputDate.getTime() - currentNYCDate.getTime();
-  
-  // Convert the difference to minutes
-  const minutes = Math.abs(Math.round(difference / (1000 * 60)));
-  
-  if (minutes < 60) {
-    return `${minutes} minutes`;
-  } else if (minutes < 1440) {
-    const hours = Math.round(minutes / 60);
-    return `${hours} hour${hours !== 1 ? 's' : ''}`;
-  } else {
-    const days = Math.round(minutes / 1440);
-    return `${days} day${days !== 1 ? 's' : ''}`;
-  }
-};
+    // Convert the difference to minutes
+    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
 
-let videoId = null;
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    } else if (minutes < 1440) {
+      const hours = Math.round(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else {
+      const days = Math.round(minutes / 1440);
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    }
+  };
 
-function checkIfYoutubeVideo(link) {
+  let videoId = null;
 
+  function checkIfYoutubeVideo(link) {
     const url = new URL(link);
     if (url?.hostname === "www.youtube.com") {
-    const searchParams = url.searchParams;
-    searchParams.delete('t'); // Remove the "t" parameter
-    const videoIdMatch = url?.search?.match(/v=([^&]+)/);
+      const searchParams = url.searchParams;
+      searchParams.delete("t"); // Remove the "t" parameter
+      const videoIdMatch = url?.search?.match(/v=([^&]+)/);
 
-    if (videoIdMatch) {
-    return videoIdMatch[1];
-    }
+      if (videoIdMatch) {
+        return videoIdMatch[1];
+      }
     } else {
-    return null;
+      return null;
     }
-}
-
-function loadMoreData() {
-  const nextIndex = newsList?.length;
-  const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
-  newsList = [...newsList, ...newArticles];
-}
-
-
-
+  }
 
+  function loadMoreData() {
+    const nextIndex = newsList?.length;
+    const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
+    newsList = [...newsList, ...newArticles];
+  }
 </script>
 
-
 <svelte:head>
-
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking Stories · stocknear
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking
+    Stories · stocknear
   </title>
-  <meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
-  
+  <meta
+    name="description"
+    content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`}
+  />
+
   <!-- Other meta tags -->
-  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
-  <meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
-  <meta property="og:type" content="website"/>
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`}
+  />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
-  <meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`}
+  />
   <!-- Add more Twitter meta tags as needed -->
-
 </svelte:head>
-  
 
+<section
+  class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
+>
+  <div class="m-auto h-full overflow-hidden w-full">
+    <main class="w-auto">
+      <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
+        <div class="mb-6 w-full">
+          <h1 class="text-2xl sm:text-3xl text-white font-bold">News</h1>
+        </div>
 
+        {#if newsList?.length !== 0}
+          <div class="grid grid-cols-1 gap-2 pb-5">
+            {#each newsList as item}
+              <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
+                {#if (videoId = checkIfYoutubeVideo(item.url))}
+                  <iframe
+                    class="w-full h-96 rounded-lg border border-gray-800"
+                    src={`https://www.youtube.com/embed/${videoId}`}
+                    frameborder="0"
+                    allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen
+                  ></iframe>
+                {:else}
+                  <a
+                    href={item?.url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="w-full border border-gray-800 rounded-lg"
+                  >
+                    <div class="flex-shrink-0 m-auto">
+                      <img
+                        src={item?.image}
+                        class="h-auto w-full rounded-lg"
+                        alt="news image"
+                        loading="lazy"
+                      />
+                    </div>
+                  </a>
+                {/if}
+                <div class="mb-1 w-full">
+                  <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
+                    {formatDate(item?.publishedDate)} ago · {item?.site}
+                  </h3>
 
-<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
-    <div class="m-auto h-full overflow-hidden w-full">
-            <main class="w-auto">
-                <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
-                    <div class="mb-6 w-full">
-                        <h1 class="text-2xl sm:text-3xl text-white font-bold">
-                          News
-                        </h1>
-                      </div>
-
-                          {#if newsList?.length !== 0}
-
-                          <div class="grid grid-cols-1 gap-2 pb-5">
-                          {#each newsList as item}
-                                <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
-                                    {#if videoId = checkIfYoutubeVideo(item.url)}
-                                        <iframe
-                                            class="w-full h-96 rounded-lg border border-gray-800"
-                                            src={`https://www.youtube.com/embed/${videoId}`}
-                                            frameborder="0"
-                                            allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                                            allowfullscreen
-                                        ></iframe>
-                                    {:else}
-                                        <a href={item?.url} rel="noopener noreferrer" target="_blank" class="w-full border border-gray-800 rounded-lg">
-                                        <div class="flex-shrink-0 m-auto">
-                                            <img src={item?.image} class="h-auto w-full rounded-lg" alt="news image" loading="lazy">
-                                        </div>
-                                        </a>
-                                    {/if}
-                                    <div class="mb-1 w-full">
-                                        <h3 class="text-sm  text-white/80 truncate mb-2 mt-3">
-                                          {formatDate(item?.publishedDate)} ago · {item?.site}
-                                        </h3>
-                                        
-                                        <a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg sm:text-xl font-bold text-white">
-                                          {item?.title}
-                                          <p class="text-white text-sm mt-2 font-normal">
-                                            {item?.text}
-                                          </p>
-                                        </a>
-                                    </div>
-                                </div>
-                          
-                                <hr class="border-blue-400 w-full m-auto mt-5 mb-5">
-                            {/each}
-                            
-                          </div>
-                          {#if newsList?.length !== rawNews?.length}
-                          <label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
-                            Load More News
-                          </label>
-                          {/if}
-
-
-                          {:else}
-                          <div class="border border-gray-800 text-center w-full max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
-                            <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>      
-                            No news article published yet!
-                          </div>
-                          {/if}
-
-                    
+                  <a
+                    href={item?.url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="text-lg sm:text-xl font-bold text-white"
+                  >
+                    {item?.title}
+                    <p class="text-white text-sm mt-2 font-normal">
+                      {item?.text}
+                    </p>
+                  </a>
                 </div>
-            </main>
-    </div>
-</section>
\ No newline at end of file
+              </div>
+
+              <hr class="border-blue-400 w-full m-auto mt-5 mb-5" />
+            {/each}
+          </div>
+          {#if newsList?.length !== rawNews?.length}
+            <label
+              on:click={loadMoreData}
+              class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
+            >
+              Load More News
+            </label>
+          {/if}
+        {:else}
+          <div
+            class="border border-gray-800 text-center w-full max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
+          >
+            <svg
+              class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              ><path
+                fill="#a474f6"
+                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+              /></svg
+            >
+            No news article published yet!
+          </div>
+        {/if}
+      </div>
+    </main>
+  </div>
+</section>