refactor stock list page
This commit is contained in:
MuslemRahimi
parent
7af34469f4
commit
749acfef7c
@ -380,6 +380,7 @@
|
||||
score: "AI Score",
|
||||
researchAndDevelopmentExpenses: "R&D",
|
||||
counter: "Ratings Count",
|
||||
rsi: "RSI",
|
||||
// Add more key-label mappings here as needed
|
||||
};
|
||||
|
||||
|
||||
@ -166,6 +166,22 @@
|
||||
title: "All Active REITs on the US Stock Market",
|
||||
link: "/list/reit-stocks",
|
||||
},
|
||||
{
|
||||
title: "FAANG Companies",
|
||||
link: "/list/faang",
|
||||
},
|
||||
{
|
||||
title: "Actively Traded Penny Stocks",
|
||||
link: "/list/penny-stocks",
|
||||
},
|
||||
{
|
||||
title: "Oversold Stocks",
|
||||
link: "/list/oversold-stocks",
|
||||
},
|
||||
{
|
||||
title: "Overbought Stocks",
|
||||
link: "/list/overbought-stocks",
|
||||
},
|
||||
];
|
||||
|
||||
navigation = [...navigationIndustry, ...navigation];
|
||||
|
||||
@ -1,554 +1,302 @@
|
||||
<!--Start Market Cap Group-->
|
||||
|
||||
<div class="container mx-auto pt-3 pl-2">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<!-- Column 1 -->
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Market Cap Groups
|
||||
</h2>
|
||||
<ul class="list-disc space-y-4 sm:space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold">Market Cap Groups</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="/list/market-cap/mega-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Mega-Cap Stocks</a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/market-cap/mega-cap-stocks">Mega-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<li>
|
||||
<a
|
||||
href="/list/market-cap/large-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>Large-Cap Stocks</a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/market-cap/large-cap-stocks">Large-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<li>
|
||||
<a
|
||||
href="/list/market-cap/mid-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Mid-Cap Stocks</a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/market-cap/mid-cap-stocks">Mid-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li class="">
|
||||
<a
|
||||
href="/list/market-cap/small-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>Small-Cap Stocks</a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/market-cap/small-cap-stocks">Small-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li class="">
|
||||
<a
|
||||
href="/list/market-cap/micro-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>Micro-Cap Stocks</a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/market-cap/micro-cap-stocks">Micro-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li class="">
|
||||
<a
|
||||
href="/list/market-cap/nano-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Nano-Cap Stocks</a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/market-cap/nano-cap-stocks">Nano-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-10 hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/market-cap/small-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>Small-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/market-cap/micro-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>Micro-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/market-cap/nano-cap-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Nano-Cap Stocks</a
|
||||
>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Market Cap Group-->
|
||||
|
||||
<!--Start Exchange Group-->
|
||||
|
||||
<div class="container mx-auto pt-10 pl-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Exchange Groups
|
||||
</h2>
|
||||
<ul class="list-disc space-y-1 pl-3">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/exchange/nasdaq"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">Exchange Groups</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/exchange/nasdaq"
|
||||
>Listed on NASDAQ</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/exchange/nyse"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Listed on NYSE</a
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/exchange/nyse"
|
||||
>Listed on NYSE</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/exchange/amex"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/exchange/amex"
|
||||
>Listed on AMEX</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-10 hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/exchange/amex"
|
||||
class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Exchange Group-->
|
||||
|
||||
<!--Start Index Group-->
|
||||
|
||||
<div class="container mx-auto pt-10 pl-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Index Groups
|
||||
</h2>
|
||||
<ul class="list-disc space-y-1 pl-3">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/index/dowjones"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">Index Groups</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/index/dowjones"
|
||||
>Listed on Dow Jones</a
|
||||
>
|
||||
Listed on Dow Jones
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/index/nasdaq100"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/index/nasdaq100"
|
||||
>Listed on NASDAQ 100</a
|
||||
>
|
||||
Listed on NASDAQ 100
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/index/sp500"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/index/sp500"
|
||||
>Listed on S&P 500</a
|
||||
>
|
||||
Listed on S&P 500
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-10 hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/index/sp500"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Listed on S&P 500
|
||||
</a>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Index Group-->
|
||||
|
||||
<!--Start Other Lists-->
|
||||
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">Other Lists</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/faang">FAANG</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/magnificent-seven">Magnificent Seven</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/dividend/dividend-kings">Dividend Kings</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/dividend/dividend-aristocrats">Dividend Aristocrats</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/penny-stocks"
|
||||
>Penny Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/oversold-stocks/"
|
||||
>Oversold Stocks</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/overbought-stocks/">Overbought Stocks</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/reit-stocks"
|
||||
>All REITs</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--End Other Lists-->
|
||||
|
||||
<!--Start Non-US Stocks Listed on US Exchanges-->
|
||||
|
||||
<div class="container mx-auto pt-10 pl-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Non-US Stocks Listed on US Exchangess
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">
|
||||
Non-US Stocks Listed on US Exchanges
|
||||
</h2>
|
||||
<ul class="list-disc space-y-1 pl-3">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/ca"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/ca"
|
||||
>Canada</a
|
||||
>
|
||||
Canada
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/cn"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/cn"
|
||||
>China</a
|
||||
>
|
||||
China
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/in"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/in"
|
||||
>India</a
|
||||
>
|
||||
India
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/jp"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/jp"
|
||||
>Japan</a
|
||||
>
|
||||
Japan
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/country/de"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/de"
|
||||
>Germany</a
|
||||
>
|
||||
Germany
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/country/il"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/il"
|
||||
>Israel</a
|
||||
>
|
||||
Israel
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/country/gb"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/country/gb"
|
||||
>United Kingdom</a
|
||||
>
|
||||
United Kingdom
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-[75px] hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/de"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Germany
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/il"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Israel
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/country/gb"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
United Kingdom
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Non-US Stocks Listed on US Exchanges-->
|
||||
|
||||
<!--Start Sector Group-->
|
||||
<div class="container mx-auto pt-10 pl-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Sector Groups
|
||||
</h2>
|
||||
<ul class="list-disc space-y-1 pl-3">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/financial"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">Sector Groups</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/sector/financial"
|
||||
>Financials</a
|
||||
>
|
||||
Financials
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/healthcare"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/healthcare">Healthcare</a
|
||||
>
|
||||
Healthcare
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/technology"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/technology">Technology</a
|
||||
>
|
||||
Technology
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/industrials"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/industrials">Industrials</a
|
||||
>
|
||||
Industrials
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/energy"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/sector/energy"
|
||||
>Energy</a
|
||||
>
|
||||
Energy
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/utilities"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/sector/utilities"
|
||||
>Utilities</a
|
||||
>
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/consumer-cyclical"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/consumer-cyclical">Consumer Cyclical</a
|
||||
>
|
||||
Consumer Cyclical
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/real-estate"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/real-estate">Real Estate</a
|
||||
>
|
||||
Real Estate
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/basic-materials"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/basic-materials">Basic Materials</a
|
||||
>
|
||||
Basic Materials
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/communication-services"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/communication-services">Communication Services</a
|
||||
>
|
||||
Communication Services
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<li>
|
||||
<a
|
||||
href="/list/sector/consumer-defensive"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/sector/consumer-defensive">Consumer Defensive</a
|
||||
>
|
||||
Consumer Defensive
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-11 hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/consumer-cyclical"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Consumer Cyclical
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/real-estate"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Real Estate
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/basic-materials"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Basic Materials
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/communication-services"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Communication Services
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/sector/consumer-defensive"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Consumer Defensive
|
||||
</a>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Sector Group-->
|
||||
|
||||
<!--Start ETF Lists-->
|
||||
|
||||
<div class="container mx-auto pt-10 pl-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">ETF Lists</h2>
|
||||
<ul class="list-disc space-y-1 pl-3">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/etf/new-launches"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">ETF Lists</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/etf/new-launches"
|
||||
>New Launches</a
|
||||
>
|
||||
New Launches
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/etf/etf-providers"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/etf/etf-providers"
|
||||
>ETF Providers</a
|
||||
>
|
||||
ETF Providers
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/bitcoin-etfs"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/bitcoin-etfs"
|
||||
>Bitcoin ETFs</a
|
||||
>
|
||||
Bitcoin ETFs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-11 hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/bitcoin-etfs"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Bitcoin ETFs
|
||||
</a>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End ETF Lists-->
|
||||
|
||||
<!--Start Other Lists-->
|
||||
|
||||
<div class="container mx-auto pt-10 pl-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Other Lists</h2>
|
||||
<ul class="list-disc space-y-1 pl-3">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/magnificent-seven"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Magnificent Seven
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/dividend/dividend-kings"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Dividend Kings
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/dividend/dividend-aristocrats"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
Dividend Aristocrats
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer sm:hidden">
|
||||
<a
|
||||
href="/list/reit-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
All REITs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-10 hidden sm:block">
|
||||
<ul class="list-disc space-y-1 pl-5">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<a
|
||||
href="/list/reit-stocks"
|
||||
class="sm:hover:text-white text-blue-400 text-lg"
|
||||
>
|
||||
All REITs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Other Lists-->
|
||||
|
||||
23
src/routes/list/faang/+page.server.ts
Normal file
23
src/routes/list/faang/+page.server.ts
Normal file
@ -0,0 +1,23 @@
|
||||
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(),
|
||||
};
|
||||
};
|
||||
70
src/routes/list/faang/+page.svelte
Normal file
70
src/routes/list/faang/+page.svelte
Normal file
@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.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>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="w-full border border-gray-600 sm:flex sm:flex-row sm:items-center m-auto text-white bg-[#09090B] sm:rounded-md 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="#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
|
||||
>
|
||||
|
||||
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 "FANG," the list did not initially include
|
||||
Apple.
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="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-sm font-normal text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs: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-sm font-normal text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs: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-sm font-normal text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} {rawData} />
|
||||
</section>
|
||||
@ -1,14 +1,15 @@
|
||||
export const load = async ({ locals }) => {
|
||||
|
||||
const getMagnificentSeven = async () => {
|
||||
const { apiURL, apiKey } = locals;
|
||||
|
||||
const response = await fetch(apiURL + "/magnificent-seven", {
|
||||
method: "GET",
|
||||
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();
|
||||
|
||||
@ -9,12 +9,6 @@
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
let totalProfits =
|
||||
rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
|
||||
let avgPERatio = (
|
||||
(rawData?.reduce((total, stock) => total + stock?.pe, 0) ?? 0) /
|
||||
rawData?.length
|
||||
)?.toFixed(2);
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
|
||||
26
src/routes/list/overbought-stocks/+page.server.ts
Normal file
26
src/routes/list/overbought-stocks/+page.server.ts
Normal file
@ -0,0 +1,26 @@
|
||||
export const load = async ({ locals, setHeaders }) => {
|
||||
|
||||
const getOverBoughtStocks = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = { filterList: 'overbought-stocks' };
|
||||
|
||||
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();
|
||||
setHeaders({ "cache-control": "public, max-age=60*5" });
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getOverBoughtStocks: await getOverBoughtStocks(),
|
||||
};
|
||||
};
|
||||
36
src/routes/list/overbought-stocks/+page.svelte
Normal file
36
src/routes/list/overbought-stocks/+page.svelte
Normal file
@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
const defaultList = [
|
||||
{ name: "RSI", rule: "rsi" },
|
||||
{ name: "Price", rule: "price" },
|
||||
{ name: "% Change", rule: "changesPercentage" },
|
||||
{ name: "Market Cap", rule: "marketCap" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md 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="#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
|
||||
>
|
||||
|
||||
A list of stocks that are "overbought" according to the Relative Strength
|
||||
Index (RSI), which is an indicator often used in technical analysis. An RSI
|
||||
of over 70 on a daily chart is generally used to determine that an asset is
|
||||
overbought and indicates that the stock may soon reverse to the downside.
|
||||
</div>
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<Table {data} rawData={data?.getOverBoughtStocks} {defaultList} />
|
||||
</section>
|
||||
26
src/routes/list/oversold-stocks/+page.server.ts
Normal file
26
src/routes/list/oversold-stocks/+page.server.ts
Normal file
@ -0,0 +1,26 @@
|
||||
export const load = async ({ locals, setHeaders }) => {
|
||||
|
||||
const getOverSoldStocks = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = { filterList: 'oversold-stocks' };
|
||||
|
||||
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();
|
||||
setHeaders({ "cache-control": "public, max-age=60*5" });
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getOverSoldStocks: await getOverSoldStocks(),
|
||||
};
|
||||
};
|
||||
37
src/routes/list/oversold-stocks/+page.svelte
Normal file
37
src/routes/list/oversold-stocks/+page.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
const defaultList = [
|
||||
{ name: "RSI", rule: "rsi" },
|
||||
{ name: "Price", rule: "price" },
|
||||
{ name: "% Change", rule: "changesPercentage" },
|
||||
{ name: "Market Cap", rule: "marketCap" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md 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="#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
|
||||
>
|
||||
|
||||
A list of stocks that are "oversold" according to the Relative Strength
|
||||
Index (RSI), which is an indicator often used in technical analysis. An RSI
|
||||
of under 30 on a daily chart is generally used to determine that an asset is
|
||||
oversold and indicates that the stock may soon bounce back from the oversold
|
||||
conditions. See also the list of overbought stocks.
|
||||
</div>
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<Table {data} rawData={data?.getOverSoldStocks} {defaultList} />
|
||||
</section>
|
||||
26
src/routes/list/penny-stocks/+page.server.ts
Normal file
26
src/routes/list/penny-stocks/+page.server.ts
Normal file
@ -0,0 +1,26 @@
|
||||
export const load = async ({ locals, setHeaders }) => {
|
||||
|
||||
const getPennyStocks = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = { filterList: 'penny-stocks' };
|
||||
|
||||
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();
|
||||
setHeaders({ "cache-control": "public, max-age=60*5" });
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getPennyStocks: await getPennyStocks(),
|
||||
};
|
||||
};
|
||||
35
src/routes/list/penny-stocks/+page.svelte
Normal file
35
src/routes/list/penny-stocks/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
const defaultList = [
|
||||
{ name: "Market Cap", rule: "marketCap" },
|
||||
{ name: "Price", rule: "price" },
|
||||
{ name: "% Change", rule: "changesPercentage" },
|
||||
{ name: "Volume", rule: "volume" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md 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="#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
|
||||
>
|
||||
|
||||
A list of actively traded penny stocks, which are generally defined as
|
||||
stocks with a price below $5 per share. It is filtered to only show stocks
|
||||
with volume over 10K.
|
||||
</div>
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<Table {data} rawData={data?.getPennyStocks} {defaultList} />
|
||||
</section>
|
||||
Loading…
x
Reference in New Issue
Block a user