refactor code with info box

src/lib/components/Infobox.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    export let text;
+</script>
+
+<div
+class="mt-5 sm:mt-0 border-l-4 border-white  p-0 sm:p-4 text-white flex flex-row items-center"
+>
+<svg
+  class="h-6 w-6 hidden sm:block"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  style="max-width:40px"
+  aria-hidden="true"
+  ><path
+    fill-rule="evenodd"
+    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+    clip-rule="evenodd"
+  ></path></svg
+>
+<div class="ml-3 w-full">
+  <div class="flex w-full flex-row justify-between">
+    <div>
+      {@html text}
+    </div>
+  </div>
+</div>
+</div>

src/routes/stocks/[tickerID]/dividends/+page.svelte

@@ -11,6 +11,7 @@
   import { LineChart, BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
+  import Infobox from "$lib/components/Infobox.svelte";
   use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]);
 
   export let data;
@@ -118,6 +119,57 @@
     optionsDividend = await plotDividend();
     isLoaded = true;
   });
+
+function generateDividendInfoHTML() {
+  const history = rawData?.history || [];
+
+  if (history.length !== 0) {
+    if (!dateDistance) {
+      const formattedExDividendDate = new Date(exDividendDate).toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      });
+
+      const payoutFrequencyText =
+        payoutFrequency === 4
+          ? '3 months'
+          : payoutFrequency === 2
+          ? '6 months'
+          : payoutFrequency === 1
+          ? '12 months'
+          : 'n/a';
+
+      return `
+        <span>
+          ${$displayCompanyName} has an annual dividend of $${annualDividend} per share, with a forward yield of ${dividendYield}%. 
+          The dividend is paid every ${payoutFrequencyText} and the last ex-dividend date was ${formattedExDividendDate}.
+        </span>
+      `;
+    } else {
+      const latestDividendDate = new Date(history.at(0)?.date).toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      });
+
+      return `
+        <span>
+          ${$displayCompanyName} issued its most recent dividend on ${latestDividendDate}. 
+          Since then, the company has not distributed any further dividends for over 12 months.
+        </span>
+      `;
+    }
+  } else {
+    return `
+      <span>
+        No dividend history available for ${$displayCompanyName}.
+      </span>
+    `;
+  }
+}
+
+const htmlOutput = generateDividendInfoHTML();
 </script>
 
 <svelte:head>
@@ -169,55 +221,7 @@
             Dividends
           </h1>
 
-          <div
+         <Infobox text={htmlOutput} />
-            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-          >
-            <svg
-              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 256 256"
-              ><path
-                fill="#fff"
-                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
-            >
-
-            {#if rawData?.history?.length !== 0}
-              {#if !dateDistance}
-                {$displayCompanyName} has an annual dividend of ${annualDividend}
-                per share, with a forward yield of
-                {dividendYield}%. The dividend is paid every
-                {payoutFrequency === 4
-                  ? "3 months"
-                  : payoutFrequency === 2
-                    ? "6 months"
-                    : payoutFrequency === 1
-                      ? "12 months"
-                      : "n/a"}
-                and the last ex-dividend date was
-                {new Date(exDividendDate)?.toLocaleString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                  daySuffix: "2-digit",
-                })}
-              {:else}
-                {$displayCompanyName} issued its most recent dividend on
-                {new Date(rawData?.history?.at(0)?.date)?.toLocaleString(
-                  "en-US",
-                  {
-                    month: "short",
-                    day: "numeric",
-                    year: "numeric",
-                    daySuffix: "2-digit",
-                  },
-                )}. Since then, the company has not distributed any further
-                dividends for over 12 months.
-              {/if}
-            {:else}
-              No dividend history available for {$displayCompanyName}.
-            {/if}
-          </div>
         </div>
 
         {#if rawData?.history?.length !== 0}

src/routes/stocks/[tickerID]/financials/+page.svelte

@@ -17,6 +17,7 @@
   import { LineChart, BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
+  import Infobox from "$lib/components/Infobox.svelte";
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
@@ -388,6 +389,36 @@
       }
     }
   }
+
+  function generateStatementInfoHTML() {
+  if ($coolMode) {
+    const statementText = statementConfig?.find(
+      (item) => item?.propertyName === displayStatement
+    )?.text;
+
+    return `<span>${statementText || ''}</span>`;
+  } else if (income?.length > 0) {
+    return `
+      <span>
+        Get detailed income statement breakdowns, uncovering revenue, expenses, and much more.
+      </span>
+    `;
+  } else {
+    return `
+      <span>
+        No financial data available for ${$displayCompanyName}.
+      </span>
+    `;
+  }
+}
+
+let htmlOutput = null;
+$: {
+  if($coolMode || displayStatement) {
+    htmlOutput = generateStatementInfoHTML()
+
+  }
+}
 </script>
 
 <svelte:head>
@@ -447,31 +478,7 @@
             </div>
 
             <div class="grid grid-cols-1 gap-2">
-              <div
+              <Infobox text={htmlOutput} />
-                class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-              >
-                <svg
-                  class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 256 256"
-                  ><path
-                    fill="#fff"
-                    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
-                >
-
-                {#if $coolMode}
-                  {statementConfig?.find(
-                    (item) => item?.propertyName === displayStatement,
-                  )?.text}
-                  <!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>-->
-                {:else if income?.length > 0}
-                  Get detailed income statement breakdowns, uncovering revenue,
-                  expenses, and much more.
-                {:else}
-                  No financial data available for {$displayCompanyName}
-                {/if}
-              </div>
               {#if income?.length > 0}
                 <div
                   class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@@ -553,7 +560,7 @@
                   </label>
 
                   <div
-                    class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
+                    class="flex flex-row items-center w-fit  sm:ml-auto"
                   >
                     <div class="relative inline-block text-left grow">
                       <DropdownMenu.Root>
@@ -611,7 +618,7 @@
                     </div>
                     <Button
                       on:click={() => exportFundamentalData("csv")}
-                      class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                      class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                     >
                       <span class="truncate text-white">Download</span>
                       <svg

src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte

@@ -18,6 +18,7 @@
   import { LineChart, BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
+  import Infobox from "$lib/components/Infobox.svelte";
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
@@ -443,6 +444,37 @@
       }
     }
   }
+
+  function generateStatementInfoHTML() {
+  if ($coolMode) {
+    const statementText = statementConfig?.find(
+      (item) => item?.propertyName === displayStatement
+    )?.text;
+
+    return `<span>${statementText || ''}</span>`;
+  } else if (balanceSheet?.length > 0) {
+    return `
+      <span>
+        Get detailed breakdowns of the balance-sheet with total debts, total investments, and much more.
+      </span>
+    `;
+  } else {
+    return `
+      <span>
+        No financial data available for ${$displayCompanyName}.
+      </span>
+    `;
+  }
+}
+
+let htmlOutput = null;
+$: {
+  if($coolMode || displayStatement) {
+    htmlOutput = generateStatementInfoHTML()
+
+  }
+}
+
 </script>
 
 <svelte:head>
@@ -506,30 +538,7 @@
           </div>
 
           <div class="grid grid-cols-1 gap-2">
-            <div
+            <Infobox text={htmlOutput} />
-              class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-            >
-              <svg
-                class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 256 256"
-                ><path
-                  fill="#fff"
-                  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
-              >
-
-              {#if $coolMode}
-                {statementConfig?.find(
-                  (item) => item?.propertyName === displayStatement,
-                )?.text}
-              {:else if balanceSheet?.length > 0}
-                Get detailed breakdowns of the balance-sheet with total debts,
-                total investments, and much more.
-              {:else}
-                No financial data available for {$displayCompanyName}
-              {/if}
-            </div>
             {#if balanceSheet?.length > 0}
               <div
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@@ -611,7 +620,7 @@
                 </label>
 
                 <div
-                  class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
+                  class="flex flex-row items-center w-fit sm:ml-auto"
                 >
                   <div class="relative inline-block text-left grow">
                     <DropdownMenu.Root>
@@ -668,7 +677,7 @@
                   </div>
                   <Button
                     on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                   >
                     <span class="truncate text-white">Download</span>
                     <svg

src/routes/stocks/[tickerID]/metrics/+layout.svelte

@@ -59,6 +59,7 @@
   <div class="m-auto h-full overflow-hidden">
     <main class="w-fit sm:w-full sm:max-w-2xl">
       <div class="m-auto">
+        {#if names?.length > 0}
         <nav
           class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
         >
@@ -83,6 +84,7 @@
             {/each}
           </ul>
         </nav>
+        {/if}
       </div>
     </main>
 

src/routes/stocks/[tickerID]/metrics/+page.svelte

@@ -251,7 +251,7 @@
           {/if}
         {:else}
         <div
-                class="border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
+                class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
               >
                 <svg
                   class="h-6 w-6 hidden sm:block"

src/routes/stocks/[tickerID]/options/+page.svelte

@@ -16,7 +16,7 @@
   import { BarChart, LineChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
@@ -570,13 +570,13 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
+<section class="w-full bg-[#09090B] overflow-hidden text-white min-h-screen">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0 ">
-        <div class="w-full mb-6">
+        <div class="w-full mb-10">
           <div
             class="w-full m-auto sm:pb-6 {data?.getOptionsNetFlow?.length === 0
               ? 'hidden'
@@ -587,27 +587,18 @@
             {/await}
           </div>
 
-          <div
-            class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-          >
-            <svg
-              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 256 256"
-              ><path
-                fill="#fff"
-                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
-            >
 
-            {#if optionsPlotData?.length !== 0}
+          {#if optionsPlotData?.length !== 0}
-              1 Year of options activity involving {$displayCompanyName} by major
+          <Infobox text={`1 Year of options activity involving ${$displayCompanyName} by major
-              institutional traders and hedge funds.
+              institutional traders and hedge funds.`} />
+    
             {:else}
-              There's no data available, indicating that major traders may not
+            <Infobox text={`There's no data available, indicating that major traders may not
-              be actively betting on {$displayCompanyName}.
+              be actively betting on ${$displayCompanyName}.`} />
+             
             {/if}
-          </div>
+
+          
         </div>
 
         {#if optionsPlotData?.length !== 0}
@@ -779,11 +770,14 @@
             </div>
           {/if}
 
+         
+
+          {#if optionList?.length !== 0}
+
           <h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
             {activeIdx === 0 ? "Historical Option Data" : "Option Chain Data"}
           </h3>
 
-          {#if optionList?.length !== 0}
             <div
               class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
             >
@@ -1124,23 +1118,7 @@
             </div>
 
             <UpgradeToPro {data} />
-          {:else}
+         
-            <div class="flex justify-center items-center m-auto mt-16 mb-6">
-              <div
-                class="text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-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="#fff"
-                    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 Options activity found
-              </div>
-            </div>
           {/if}
         {/if}
       </div>

src/routes/stocks/[tickerID]/statistics/employees/+page.svelte

@@ -12,6 +12,7 @@
   import { BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
+  import Infobox from "$lib/components/Infobox.svelte";
   use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   import { abbreviateNumber } from "$lib/utils";
@@ -342,6 +343,56 @@
       goto("/pricing");
     }
   };
+
+  function generateEmployeeInfoHTML() {
+  if (employeeHistory?.length !== 0 && !dateDistance) {
+    const formattedEmployees = new Intl.NumberFormat('en').format(employees);
+    const latestFilingDate = new Date(
+      employeeHistory[employeeHistory.length - 1]['filingDate']
+    ).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+    const formattedChangeRate = new Intl.NumberFormat('en').format(changeRate);
+    const changeDirection = changeRate >= 0 && changeRate !== null ? 'increased' : 'decreased';
+    const growthRateClass = changeRate >= 0 && changeRate !== null ? 'text-[#00FC50]' : 'text-[#FF2F1F]';
+
+    return `
+      <span>
+        ${$displayCompanyName} had ${formattedEmployees} employees on ${latestFilingDate}. The number of employees ${changeDirection}
+        by ${formattedChangeRate} or
+        <span class="${growthRateClass}">
+          ${growthRate}%
+        </span>
+        compared to the previous year.
+      </span>
+    `;
+  } else if (employeeHistory?.length !== 0 && dateDistance) {
+    const abbreviatedEmployees = abbreviateNumber(employees);
+    const latestFilingDate = new Date(
+      employeeHistory[employeeHistory.length - 1]['filingDate']
+    ).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+
+    return `
+      <span>
+        ${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestFilingDate}. Since then, the company has not submitted any additional employee data for more than a year.
+      </span>
+    `;
+  } else {
+    return `
+      <span>
+        No employee history for ${$displayCompanyName}. Probably, no records of past employees.
+      </span>
+    `;
+  }
+}
+
+const htmlOutput = generateEmployeeInfoHTML();
 </script>
 
 <svelte:head>
@@ -392,72 +443,12 @@
             {$stockTicker} Employees
           </h2>
 
-          <div
+          
-            class="text-white text-sm sm:text-[1rem] p-3 sm:p-5 mb-5 rounded-md border border-gray-800"
+         <Infobox text={htmlOutput} />
-          >
-            <span class="inline-block align-text-bottom">
-              <svg
-                class="w-5 h-5 inline-block align-text-bottom"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 256 256"
-              >
-                <path
-                  fill="#fff"
-                  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>
-            </span>
-            {#if employeeHistory?.length !== 0 && !dateDistance}
-              <span>
-                {$displayCompanyName} had {new Intl.NumberFormat("en")?.format(
-                  employees,
-                )} employees on
-                {new Date(
-                  employeeHistory[employeeHistory?.length - 1]["filingDate"],
-                )?.toLocaleString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                  daySuffix: "2-digit",
-                })}. The number of employees {changeRate >= 0 &&
-                changeRate !== null
-                  ? "increased"
-                  : "decreased"}
-                by {new Intl.NumberFormat("en")?.format(changeRate)} or
-                <span
-                  class={changeRate >= 0 && changeRate !== null
-                    ? "text-[#00FC50]"
-                    : "text-[#FF2F1F]"}
-                >
-                  {growthRate}%
-                </span>
-                compared to the previous year.
-              </span>
-            {:else if employeeHistory?.length !== 0 && dateDistance}
-              <span>
-                {$displayCompanyName} had {abbreviateNumber(employees)} employees
-                on
-                {new Date(
-                  employeeHistory[employeeHistory?.length - 1]["filingDate"],
-                )?.toLocaleString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                  daySuffix: "2-digit",
-                })}. Since then, the company has not submitted any additional
-                employee data for more than a year.
-              </span>
-            {:else}
-              <span>
-                No employee history for {$displayCompanyName}. Probably, no
-                records of past employees.
-              </span>
-            {/if}
-          </div>
         </div>
 
         <div
-          class="my-5 grid grid-cols-2 gap-3 px-1 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 sm:px-4"
+          class="my-5 grid grid-cols-2 gap-3  xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 "
         >
           <div>
             Employees
@@ -537,7 +528,7 @@
           </h1>
           {#if historyList?.length > 0}
             <div
-              class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
+              class="flex flex-row items-center w-fit   ml-auto"
             >
               <div class="relative inline-block text-left grow">
                 <DropdownMenu.Root>
@@ -594,7 +585,7 @@
               </div>
               <Button
                 on:click={() => exportData("csv")}
-                class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
               >
                 <span class="truncate text-white">Download</span>
                 <svg

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -16,6 +16,7 @@
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
   import { onMount } from "svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
@@ -415,34 +416,24 @@
 
             {#if rawData?.length !== 0}
               <div class="grid grid-cols-1 gap-2">
-                <div
+
-                  class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
+                <Infobox text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
-                >
+                    data?.getStockQuote?.marketCap
-                  <svg
+                  )} as of ${new Date()?.toLocaleString("en-US", {
-                    class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 256 256"
-                    ><path
-                      fill="#fff"
-                      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
-                  >
-                  {$displayCompanyName} has a market cap of {abbreviateNumber(
-                    data?.getStockQuote?.marketCap,
-                    true,
-                  )} as of {new Date()?.toLocaleString("en-US", {
                     month: "short",
                     day: "numeric",
                     year: "numeric",
                     daySuffix: "2-digit",
-                  })}. Its market cap has {changePercentageYearAgo > 0
+                  })}. Its market cap has ${changePercentageYearAgo > 0
                     ? "increased"
                     : changePercentageYearAgo < 0
                       ? "decreased"
-                      : "unchanged"} by {abbreviateNumber(
+                      : "unchanged"} by ${abbreviateNumber(
                     changePercentageYearAgo?.toFixed(2),
-                  )}% in one year.
+                  )}% in one year.`} 
-                </div>
+              />
+
+               
 
                 <div
                   class="mb-4 mt-5 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"