From 3e7754fed0920f5a0a6f97f6aabcf39b23d76d2e Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 18 Jan 2025 20:23:52 +0100
Subject: [PATCH] update list

---
 src/routes/list/+layout.svelte                |  32 ++++
 .../{ai-stocks => [slug]}/+page.server.ts     |   4 +-
 src/routes/list/[slug]/+page.svelte           | 147 ++++++++++++++++++
 src/routes/list/ai-stocks/+page.svelte        |  59 -------
 src/routes/list/faang/+page.server.ts         |  23 ---
 src/routes/list/faang/+page.svelte            |  64 --------
 .../list/magnificent-seven/+page.server.ts    |  24 ---
 .../list/magnificent-seven/+page.svelte       |  64 --------
 8 files changed, 181 insertions(+), 236 deletions(-)
 rename src/routes/list/{ai-stocks => [slug]}/+page.server.ts (83%)
 create mode 100644 src/routes/list/[slug]/+page.svelte
 delete mode 100644 src/routes/list/ai-stocks/+page.svelte
 delete mode 100644 src/routes/list/faang/+page.server.ts
 delete mode 100644 src/routes/list/faang/+page.svelte
 delete mode 100644 src/routes/list/magnificent-seven/+page.server.ts
 delete mode 100644 src/routes/list/magnificent-seven/+page.svelte

diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index 31f957b9..b241dba0 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -250,6 +250,38 @@
       title: "Biggest Electric Vehicle Stocks",
       link: "/list/electric-vehicles",
     },
+    {
+      title: "Biggest Augmented Reality Stocks",
+      link: "/list/augmented-reality",
+    },
+    {
+      title: "Biggest Gaming Stocks by Market Cap",
+      link: "/list/gaming-stocks",
+    },
+    {
+      title: "Biggest Pharmaceutical Stocks",
+      link: "/list/pharmaceutical-stocks",
+    },
+    {
+      title: "Biggest Online Dating Stocks",
+      link: "/list/online-dating",
+    },
+    {
+      title: "Biggest Virtual Reality Stocks",
+      link: "/list/virtual-reality",
+    },
+    {
+      title: "Biggest Sports Betting Stocks",
+      link: "/list/sports-betting",
+    },
+    {
+      title: "Biggest Metaverse Stocks",
+      link: "/list/metaverse",
+    },
+    {
+      title: "Biggest Online Gambling Stocks",
+      link: "/list/online-gambling",
+    },
   ];
 
   navigation = [...navigationIndustry, ...navigation];
diff --git a/src/routes/list/ai-stocks/+page.server.ts b/src/routes/list/[slug]/+page.server.ts
similarity index 83%
rename from src/routes/list/ai-stocks/+page.server.ts
rename to src/routes/list/[slug]/+page.server.ts
index 9e232ed3..e946d15f 100644
--- a/src/routes/list/ai-stocks/+page.server.ts
+++ b/src/routes/list/[slug]/+page.server.ts
@@ -1,7 +1,7 @@
-export const load = async ({ locals }) => {
+export const load = async ({ locals, params }) => {
   const getData = async () => {
     const { apiKey, apiURL } = locals;
-    const postData = {'filterList': 'ai-stocks'}
+    const postData = {'filterList': params.slug}
     // make the POST request to the endpoint
     const response = await fetch(apiURL + "/list-category", {
       method: "POST",
diff --git a/src/routes/list/[slug]/+page.svelte b/src/routes/list/[slug]/+page.svelte
new file mode 100644
index 00000000..96c14464
--- /dev/null
+++ b/src/routes/list/[slug]/+page.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import SEO from "$lib/components/SEO.svelte";
+  import { page } from "$app/stores";
+
+  export let data;
+  let rawData = data?.getData;
+
+  let totalMarketCap =
+    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
+  let totalRevenue =
+    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
+
+  const navigation = [
+    {
+      title: "A List of The Five FAANG Companies",
+      description:
+        "The FAANG stocks are a list of five U.S. technology companies: Facebook (now Meta), Amazon, Apple, Netflix and Alphabet (Google).",
+      info: "The FAANG stocks refer to five major U.S. tech companies: Meta (formerly Facebook), Amazon, Apple, Netflix, and Alphabet (Google). Originally popularized by Jim Cramer as FAANG.",
+      link: "/list/faang",
+    },
+    {
+      title: "A List of All Magnificent Seven Stocks",
+      description:
+        "The Magnificent Seven stocks refer to seven leading U.S. technology companies: Meta (formerly Facebook), Amazon, Apple, Microsoft, Nvidia, Alphabet (Google), and Tesla.",
+      info: "The magnificent seven stocks are 7 technology stocks that drove a large portion of the market's returns in 2023 and 2024. The list includes Apple, Microsoft, Amazon, Alphabet (Google), Tesla, Nvidia and Meta Platforms.",
+      link: "/list/magnificent-seven",
+    },
+    {
+      title: "A List of Artificial Intelligence (AI) Stocks",
+      description: "",
+      info: "This is a list of the top stocks that are directly involved with artificial intelligence (AI) and/or have significant exposure to the growth of AI technology.",
+      link: "/list/ai-stocks",
+    },
+    {
+      title: "A List of Augmented Reality Stocks",
+      description: "",
+      info: "",
+      link: "/list/augmented-reality",
+    },
+    {
+      title: "A List of Augmented Reality Stocks",
+      description: "",
+      info: "",
+      link: "/list/augmented-reality",
+    },
+    {
+      title: "A List of Gaming Company Stocks by Market Cap",
+      description: "",
+      info: "The biggest gaming company stocks, ranked by market cap. This list includes stocks of companies who get a significant percentage of their revenue from video games or gaming-related products.",
+      link: "/list/gaming-stocks",
+    },
+    {
+      title: "The Biggest Pharmaceutical Stocks by Market Cap",
+      description:
+        "A list of the biggest pharmaceutical and drug company stocks, ranked by market cap.",
+      info: "",
+      link: "/list/pharmaceutical-stocks",
+    },
+    {
+      title: "A List of Online Dating Stocks",
+      description: "",
+      info: "",
+      link: "/list/online-dating",
+    },
+    {
+      title: "A List of Virtual Reality Stocks",
+      description: "",
+      info: "",
+      link: "/list/virtual-reality",
+    },
+    {
+      title: "A List of Online Gambling Stocks",
+      description: "",
+      info: "",
+      link: "/list/online-gambling",
+    },
+    {
+      title: "A List of Sports Betting Stocks",
+      description: "",
+      info: "",
+      link: "/list/sports-betting",
+    },
+    {
+      title: "A List of Metaverse Stocks, Sorted by Market Cap",
+      description:
+        "These are the biggest stocks that are making significant investments in the metaverse, a concept related to virtual worlds accessed through augmented and virtual reality devices.",
+      info: "The metaverse is a concept for virtual environments that people can access through the internet, usually via augmented reality (AR) or virtual reality (VR) devices. Many companies are making huge investments in the metaverse, which is expected to become a big market in the future.",
+      link: "/list/metaverse",
+    },
+  ];
+
+  // Using the reactive statement to update currentNavigation based on the current page URL
+  $: currentNavigation = navigation?.find(
+    (cat) => $page.url.pathname === cat?.link,
+  );
+</script>
+
+<SEO
+  title={currentNavigation?.title}
+  description={currentNavigation?.description}
+/>
+
+<section class="w-full overflow-hidden m-auto">
+  {#if currentNavigation?.info}
+    <Infobox text={currentNavigation?.info} />
+  {/if}
+
+  <div
+    class="mt-6 mb-4 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"
+  >
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {new Intl.NumberFormat("en")?.format(rawData?.length)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalMarketCap)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalRevenue)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Table {data} rawData={data?.getData} />
+</section>
diff --git a/src/routes/list/ai-stocks/+page.svelte b/src/routes/list/ai-stocks/+page.svelte
deleted file mode 100644
index 25beb744..00000000
--- a/src/routes/list/ai-stocks/+page.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-  import { abbreviateNumber } from "$lib/utils";
-  import Table from "$lib/components/Table/Table.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import SEO from "$lib/components/SEO.svelte";
-
-  export let data;
-  let rawData = data?.getData;
-
-  let totalMarketCap =
-    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
-  let totalRevenue =
-    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
-</script>
-
-<SEO title="A List of Artificial Intelligence (AI) Stocks" description="" />
-
-<section class="w-full overflow-hidden m-auto">
-  <Infobox
-    text="This is a list of the top stocks that are directly involved with artificial intelligence (AI) and/or have significant exposure to the growth of AI technology."
-  />
-
-  <div
-    class="mt-6 mb-4 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"
-  >
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {new Intl.NumberFormat("en")?.format(rawData?.length)}
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {abbreviateNumber(totalMarketCap)}
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {abbreviateNumber(totalRevenue)}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Table {data} rawData={data?.getData} />
-</section>
diff --git a/src/routes/list/faang/+page.server.ts b/src/routes/list/faang/+page.server.ts
deleted file mode 100644
index 27d1cf09..00000000
--- a/src/routes/list/faang/+page.server.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const load = async ({ locals }) => {
-  const getFAANG = async () => {
-    const { apiKey, apiURL } = locals;
-    const postData = {'filterList': 'faang'}
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/list-category", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData)
-    });
-
-    const output = await response.json();
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getFAANG: await getFAANG(),
-  };
-};
diff --git a/src/routes/list/faang/+page.svelte b/src/routes/list/faang/+page.svelte
deleted file mode 100644
index ffe06af5..00000000
--- a/src/routes/list/faang/+page.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { abbreviateNumber } from "$lib/utils";
-  import Table from "$lib/components/Table/Table.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import SEO from "$lib/components/SEO.svelte";
-
-  export let data;
-  let rawData = data?.getFAANG;
-
-  let totalMarketCap =
-    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
-  let totalRevenue =
-    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
-</script>
-
-<SEO
-  title="A List of The Five FAANG Companies"
-  description="The FAANG stocks are a list of five U.S. technology companies: Facebook (now Meta), Amazon, Apple, Netflix and Alphabet (Google)."
-/>
-
-<section class="w-full overflow-hidden m-auto">
-  <Infobox
-    text="The FAANG stocks refer to five major U.S. tech companies: Meta (formerly
-    Facebook), Amazon, Apple, Netflix, and Alphabet (Google). Originally
-    popularized by Jim Cramer as FAANG."
-  />
-
-  <div
-    class="mt-6 mb-4 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"
-  >
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {new Intl.NumberFormat("en")?.format(rawData?.length)}
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {abbreviateNumber(totalMarketCap)}
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {abbreviateNumber(totalRevenue)}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Table {data} {rawData} />
-</section>
diff --git a/src/routes/list/magnificent-seven/+page.server.ts b/src/routes/list/magnificent-seven/+page.server.ts
deleted file mode 100644
index 79f5aec8..00000000
--- a/src/routes/list/magnificent-seven/+page.server.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const load = async ({ locals }) => {
-  const getMagnificentSeven = async () => {
-    const { apiKey, apiURL } = locals;
-    const postData = {'filterList': 'magnificent-seven'}
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/list-category", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData)
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getMagnificentSeven: await getMagnificentSeven(),
-  };
-};
diff --git a/src/routes/list/magnificent-seven/+page.svelte b/src/routes/list/magnificent-seven/+page.svelte
deleted file mode 100644
index ac605486..00000000
--- a/src/routes/list/magnificent-seven/+page.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { abbreviateNumber } from "$lib/utils";
-  import Table from "$lib/components/Table/Table.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import SEO from "$lib/components/SEO.svelte";
-
-  export let data;
-  let rawData = data?.getMagnificentSeven;
-
-  let totalMarketCap =
-    rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
-  let totalRevenue =
-    rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
-</script>
-
-<SEO
-  title="A List of All Magnificent Seven Stocks"
-  description="The Magnificent Seven stocks refer to seven leading U.S. technology companies: Meta (formerly Facebook), Amazon, Apple, Microsoft, Nvidia, Alphabet (Google), and Tesla."
-/>
-
-<section class="w-full overflow-hidden m-auto">
-  <Infobox
-    text="The magnificent seven stocks are 7 technology stocks that drove a large
-    portion of the market's returns in 2023 and 2024. The list includes Apple,
-    Microsoft, Amazon, Alphabet (Google), Tesla, Nvidia and Meta Platforms."
-  />
-
-  <div
-    class="mt-6 mb-4 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"
-  >
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Stocks</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {new Intl.NumberFormat("en")?.format(rawData?.length)}
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {abbreviateNumber(totalMarketCap)}
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
-      <div class="flex items-center justify-between sm:block">
-        <div class="text-[1rem] font-semibold text-white">Total Revenue</div>
-        <div
-          class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
-        >
-          {abbreviateNumber(totalRevenue)}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Table {data} rawData={data?.getMagnificentSeven} />
-</section>