From 1a460306bc2de717a22958020407aa9f96c0f4ed Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 6 Nov 2024 15:15:13 +0100
Subject: [PATCH] add pre and after hours market movers

---
 src/routes/+page.svelte                       |   4 +-
 src/routes/market-mover/+layout.svelte        |  47 +--
 .../market-mover/afterhours/+page.server.ts   |  23 ++
 .../market-mover/afterhours/+page.svelte      | 280 +++++++++++++++++
 .../market-mover/premarket/+page.server.ts    |  23 ++
 .../market-mover/premarket/+page.svelte       | 289 ++++++++++++++++++
 6 files changed, 629 insertions(+), 37 deletions(-)
 create mode 100644 src/routes/market-mover/afterhours/+page.server.ts
 create mode 100644 src/routes/market-mover/afterhours/+page.svelte
 create mode 100644 src/routes/market-mover/premarket/+page.server.ts
 create mode 100644 src/routes/market-mover/premarket/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 29264887..c54e9665 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -241,7 +241,7 @@
                       ? "Top"
                       : marketStatus === 1
                         ? "Pre-Market"
-                        : "After-Market"} Gainers</Card.Title
+                        : "Afterhours"} Gainers</Card.Title
                   >
                 </div>
               </div>
@@ -318,7 +318,7 @@
                       ? "Top"
                       : marketStatus === 1
                         ? "Pre-Market"
-                        : "After-Market"} Losers</Card.Title
+                        : "Afterhours"} Losers</Card.Title
                   >
                 </div>
               </div>
diff --git a/src/routes/market-mover/+layout.svelte b/src/routes/market-mover/+layout.svelte
index 6ad17db2..0fb8af69 100644
--- a/src/routes/market-mover/+layout.svelte
+++ b/src/routes/market-mover/+layout.svelte
@@ -18,44 +18,17 @@
       title: "Active",
       path: "/market-mover/active",
     },
+    {
+      title: "Pre-Market",
+      path: "/market-mover/premarket",
+    },
+    {
+      title: "After-Hours",
+      path: "/market-mover/afterhours",
+    },
   ];
 
   let activeIdx = 0;
-  let timePeriod = "1D";
-  let buttonText = "Top Winners";
-
-  function changeSection(index) {
-    activeIdx = index;
-    sortOrders = {
-      symbol: { order: "none", type: "string" },
-      name: { order: "none", type: "string" },
-      changesPercentage: { order: "none", type: "number" },
-      price: { order: "none", type: "number" },
-      marketCap: { order: "none", type: "number" },
-      volume: { order: "none", type: "number" },
-    };
-    if (index === 0) {
-      gainerLoserActive = outputList?.gainers[timePeriod];
-      buttonText = "Top Winners";
-    } else if (index === 1) {
-      gainerLoserActive = outputList?.losers[timePeriod];
-      buttonText = "Top Losers";
-    } else if (index === 2) {
-      gainerLoserActive = outputList?.active[timePeriod];
-      buttonText = "Most Active";
-    }
-  }
-
-  function selectTimeInterval(state) {
-    timePeriod = state;
-    if (buttonText === "Top Winners") {
-      gainerLoserActive = outputList?.gainers[timePeriod];
-    } else if (buttonText === "Top Losers") {
-      gainerLoserActive = outputList?.losers[timePeriod];
-    } else if (buttonText === "Most Active") {
-      gainerLoserActive = outputList?.active[timePeriod];
-    }
-  }
 
   // Subscribe to the $page store to reactively update the activeIdx based on the URL
   $: if ($page.url.pathname === "/market-mover") {
@@ -64,6 +37,10 @@
     activeIdx = 1;
   } else if ($page.url.pathname.startsWith("/market-mover/active")) {
     activeIdx = 2;
+  } else if ($page.url.pathname.startsWith("/market-mover/premarket")) {
+    activeIdx = 3;
+  } else if ($page.url.pathname.startsWith("/market-mover/afterhours")) {
+    activeIdx = 4;
   }
 </script>
 
diff --git a/src/routes/market-mover/afterhours/+page.server.ts b/src/routes/market-mover/afterhours/+page.server.ts
new file mode 100644
index 00000000..8366e8de
--- /dev/null
+++ b/src/routes/market-mover/afterhours/+page.server.ts
@@ -0,0 +1,23 @@
+export const load = async ({ locals }) => {
+  const { apiURL, apiKey } = locals;
+
+  const getMarketMover = async () => {
+    const postData = { params: "afterhours" };
+    const response = await fetch(apiURL + "/pre-after-market-movers", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  return {
+    getMarketMover: await getMarketMover(),
+  };
+};
diff --git a/src/routes/market-mover/afterhours/+page.svelte b/src/routes/market-mover/afterhours/+page.svelte
new file mode 100644
index 00000000..66553c1a
--- /dev/null
+++ b/src/routes/market-mover/afterhours/+page.svelte
@@ -0,0 +1,280 @@
+<script lang="ts">
+  import { screenWidth, numberOfUnreadNotification } from "$lib/store";
+  import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+
+  export let data;
+  let categoryType = "gainers";
+
+  const lastTradingDay = new Date(getLastTradingDay() ?? null)?.toLocaleString(
+    "en-US",
+    {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    },
+  );
+
+  let rawData = data?.getMarketMover;
+  let stockList = rawData[categoryType];
+
+  function selectTimeInterval(state) {
+    categoryType = state;
+    stockList = rawData[categoryType];
+  }
+
+  let columns = [
+    { key: "rank", label: "Rank", align: "center" },
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "changesPercentage", label: "% Change", align: "right" },
+    { key: "price", label: "Price", align: "right" },
+    { key: "marketCap", label: "Market Cap", align: "right" },
+    { key: "volume", label: "Volume", align: "right" },
+  ];
+
+  let sortOrders = {
+    rank: { order: "none", type: "number" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    changesPercentage: { order: "none", type: "number" },
+    price: { order: "none", type: "number" },
+    marketCap: { order: "none", type: "number" },
+    volume: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = [];
+
+    originalData = rawData[categoryType];
+
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    stockList = [...originalData].sort(compareValues);
+  };
+  $: charNumber = $screenWidth < 640 ? 20 : 30;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    Afterhours Top Stocks · stocknear
+  </title>
+  <meta
+    name="description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`Today's Afterhours Top Stocks · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <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={`Today's Afterhours Top Stocks · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full overflow-hidden m-auto min-h-screen">
+  <div class="flex justify-center w-full m-auto overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <main class="w-full">
+        <!--Start Top Winners/Losers-->
+
+        <nav class=" pt-1 overflow-x-scroll whitespace-nowrap">
+          <ul
+            class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
+          >
+            <li
+              on:click={() => selectTimeInterval("gainers")}
+              class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Gainers
+            </li>
+            <li
+              on:click={() => selectTimeInterval("losers")}
+              class="p-2 px-5 cursor-pointer {categoryType === 'losers'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Losers
+            </li>
+          </ul>
+        </nav>
+
+        <div
+          class="flex flex-col justify-center items-center overflow-hidden mt-10"
+        >
+          <div class="controls groups w-full">
+            <div
+              class="title-group flex flex-row items-center justify-start mb-3"
+            >
+              <h1 class="text-white text-xl sm:text-2xl font-semibold">
+                Afterhours {categoryType === "gainers" ? "Gainers" : "Losers"}
+              </h1>
+
+              <div
+                class="mb-0 ml-3 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+              >
+                <span class="hidden lg:inline">Updated</span>
+                {lastTradingDay}
+              </div>
+            </div>
+          </div>
+
+          <div class="w-full overflow-x-scroll no-scrollbar">
+            <table
+              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+            >
+              <thead>
+                <TableHeader {columns} {sortOrders} {sortData} />
+              </thead>
+              <tbody>
+                {#each stockList as item}
+                  <tr
+                    class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
+                  >
+                    <td
+                      class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B]"
+                    >
+                      {item?.rank}
+                    </td>
+
+                    <td
+                      class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                    >
+                      <a
+                        href={"/stocks/" + item?.symbol}
+                        class="sm:hover:text-white text-blue-400"
+                      >
+                        {item?.symbol}
+                      </a>
+                    </td>
+                    <td
+                      class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                    >
+                      {item?.name?.length > charNumber
+                        ? item?.name?.slice(0, charNumber) + "..."
+                        : item?.name}
+                    </td>
+
+                    <td
+                      class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]"
+                    >
+                      {#if item?.changesPercentage >= 0}
+                        <span class="text-[#00FC50]"
+                          >+{item?.changesPercentage >= 1000
+                            ? abbreviateNumber(item?.changesPercentage)
+                            : item?.changesPercentage?.toFixed(2)}%</span
+                        >
+                      {:else}
+                        <span class="text-[#FF2F1F]"
+                          >{item?.changesPercentage <= -1000
+                            ? abbreviateNumber(item?.changesPercentage)
+                            : item?.changesPercentage?.toFixed(2)}%
+                        </span>
+                      {/if}
+                    </td>
+
+                    <td
+                      class="text-white text-sm sm:text-[1rem] text-end border-b-[#09090B]"
+                    >
+                      {item?.price?.toFixed(2)}
+                    </td>
+
+                    <td
+                      class="text-white text-sm sm:text-[1rem] border-b-[#09090B] text-end"
+                    >
+                      {item?.marketCap !== null
+                        ? abbreviateNumber(item?.marketCap)
+                        : "-"}
+                    </td>
+
+                    <td
+                      class="text-white text-sm sm:text-[1rem] border-b-[#09090B] text-end"
+                    >
+                      {item?.volume !== null
+                        ? abbreviateNumber(item?.volume)
+                        : "-"}
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/market-mover/premarket/+page.server.ts b/src/routes/market-mover/premarket/+page.server.ts
new file mode 100644
index 00000000..ad1d6bab
--- /dev/null
+++ b/src/routes/market-mover/premarket/+page.server.ts
@@ -0,0 +1,23 @@
+export const load = async ({ locals }) => {
+  const { apiURL, apiKey } = locals;
+
+  const getMarketMover = async () => {
+    const postData = { params: "premarket" };
+    const response = await fetch(apiURL + "/pre-after-market-movers", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  return {
+    getMarketMover: await getMarketMover(),
+  };
+};
diff --git a/src/routes/market-mover/premarket/+page.svelte b/src/routes/market-mover/premarket/+page.svelte
new file mode 100644
index 00000000..3570b98e
--- /dev/null
+++ b/src/routes/market-mover/premarket/+page.svelte
@@ -0,0 +1,289 @@
+<script lang="ts">
+  import { screenWidth, numberOfUnreadNotification } from "$lib/store";
+  import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+
+  export let data;
+  let categoryType = "gainers";
+
+  const lastTradingDay = new Date(getLastTradingDay() ?? null)?.toLocaleString(
+    "en-US",
+    {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    },
+  );
+
+  const displayTitle = {
+    "1D": "Active Today",
+    "1W": "Week Active",
+    "1M": "Month Active",
+    "1Y": "1 Year Active",
+    "3Y": "3 Year Active",
+    "5Y": "5 Year Active",
+  };
+
+  let rawData = data?.getMarketMover;
+  let stockList = rawData[categoryType];
+
+  function selectTimeInterval(state) {
+    categoryType = state;
+    stockList = rawData[categoryType];
+  }
+
+  let columns = [
+    { key: "rank", label: "Rank", align: "center" },
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "changesPercentage", label: "% Change", align: "right" },
+    { key: "price", label: "Price", align: "right" },
+    { key: "marketCap", label: "Market Cap", align: "right" },
+    { key: "volume", label: "Volume", align: "right" },
+  ];
+
+  let sortOrders = {
+    rank: { order: "none", type: "number" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    changesPercentage: { order: "none", type: "number" },
+    price: { order: "none", type: "number" },
+    marketCap: { order: "none", type: "number" },
+    volume: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = [];
+
+    originalData = rawData[categoryType];
+
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    stockList = [...originalData].sort(compareValues);
+  };
+  $: charNumber = $screenWidth < 640 ? 20 : 30;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    Premarket Top Stocks · stocknear
+  </title>
+  <meta
+    name="description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`Today's Premarket Top Stocks · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <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={`Today's Premarket Top Stocks · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="w-full overflow-hidden m-auto">
+  <div class="flex justify-center w-full m-auto overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      <main class="w-full">
+        <!--Start Top Winners/Losers-->
+
+        <nav class=" pt-1 overflow-x-scroll whitespace-nowrap">
+          <ul
+            class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
+          >
+            <li
+              on:click={() => selectTimeInterval("gainers")}
+              class="p-2 px-5 cursor-pointer {categoryType === 'gainers'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Gainers
+            </li>
+            <li
+              on:click={() => selectTimeInterval("losers")}
+              class="p-2 px-5 cursor-pointer {categoryType === 'losers'
+                ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+            >
+              Losers
+            </li>
+          </ul>
+        </nav>
+
+        <div
+          class="flex flex-col justify-center items-center overflow-hidden mt-10"
+        >
+          <div class="controls groups w-full">
+            <div
+              class="title-group flex flex-row items-center justify-start mb-3"
+            >
+              <h1 class="text-white text-xl sm:text-2xl font-semibold">
+                Premarket {categoryType === "gainers" ? "Gainers" : "Losers"}
+              </h1>
+
+              <div
+                class="mb-0 ml-3 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+              >
+                <span class="hidden lg:inline">Updated</span>
+                {lastTradingDay}
+              </div>
+            </div>
+          </div>
+
+          <div class="w-full overflow-x-scroll no-scrollbar">
+            <table
+              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+            >
+              <thead>
+                <TableHeader {columns} {sortOrders} {sortData} />
+              </thead>
+              <tbody>
+                {#each stockList as item}
+                  <tr
+                    class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
+                  >
+                    <td
+                      class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B]"
+                    >
+                      {item?.rank}
+                    </td>
+
+                    <td
+                      class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+                    >
+                      <a
+                        href={"/stocks/" + item?.symbol}
+                        class="sm:hover:text-white text-blue-400"
+                      >
+                        {item?.symbol}
+                      </a>
+                    </td>
+                    <td
+                      class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                    >
+                      {item?.name?.length > charNumber
+                        ? item?.name?.slice(0, charNumber) + "..."
+                        : item?.name}
+                    </td>
+
+                    <td
+                      class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]"
+                    >
+                      {#if item?.changesPercentage >= 0}
+                        <span class="text-[#00FC50]"
+                          >+{item?.changesPercentage >= 1000
+                            ? abbreviateNumber(item?.changesPercentage)
+                            : item?.changesPercentage?.toFixed(2)}%</span
+                        >
+                      {:else}
+                        <span class="text-[#FF2F1F]"
+                          >{item?.changesPercentage <= -1000
+                            ? abbreviateNumber(item?.changesPercentage)
+                            : item?.changesPercentage?.toFixed(2)}%
+                        </span>
+                      {/if}
+                    </td>
+
+                    <td
+                      class="text-white text-sm sm:text-[1rem] text-end border-b-[#09090B]"
+                    >
+                      {item?.price?.toFixed(2)}
+                    </td>
+
+                    <td
+                      class="text-white text-sm sm:text-[1rem] border-b-[#09090B] text-end"
+                    >
+                      {item?.marketCap !== null
+                        ? abbreviateNumber(item?.marketCap)
+                        : "-"}
+                    </td>
+
+                    <td
+                      class="text-white text-sm sm:text-[1rem] border-b-[#09090B] text-end"
+                    >
+                      {item?.volume !== null
+                        ? abbreviateNumber(item?.volume)
+                        : "-"}
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</section>