frontend/src/routes/list/+layout.svelte
MuslemRahimi 102d5a36e0 ui fixes
2024-11-02 11:31:43 +01:00

327 lines
9.4 KiB
Svelte

<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import { page } from "$app/stores";
import { industryList } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
function formatFilename(industryName) {
let formattedName = industryName
?.replace(/ /g, "-")
.replace(/&/g, "and")
.replace(/-{2,}/g, "-")
.toLowerCase();
return formattedName;
}
let navigationIndustry = industryList.map((industry) => ({
title: industry,
link: `/list/industry/${formatFilename(industry)}`,
}));
let navigation = [
{
title: "Stock Lists",
link: "/list",
},
{
title: "Mega-Cap Stocks",
link: "/list/market-cap/mega-cap-stocks",
},
{
title: "Large-Cap Stocks",
link: "/list/market-cap/large-cap-stocks",
},
{
title: "Mid-Cap Stocks",
link: "/list/market-cap/mid-cap-stocks",
},
{
title: "Small-Cap Stocks",
link: "/list/market-cap/small-cap-stocks",
},
{
title: "Micro-Cap Stocks",
link: "/list/market-cap/micro-cap-stocks",
},
{
title: "Nano-Cap Stocks",
link: "/list/market-cap/nano-cap-stocks",
},
{
title: "All Stocks Listed on the NASDAQ",
link: "/list/nasdaq-stocks",
},
{
title: "All Stocks Listed on the NYSE",
link: "/list/nyse-stocks",
},
{
title: "All Stocks Listed on XETRA",
link: "/list/xetra-stocks",
},
{
title: "All Stocks Listed on AMEX",
link: "/list/amex-stocks",
},
{
title: "Dow Jones Industrial Average Stocks List",
link: "/list/dow-jones-stocks",
},
{
title: "NASDAQ 100 Index Stocks List",
link: "/list/nasdaq-100-stocks",
},
{
title: "S&P 500 Index Stocks List",
link: "/list/sp-500-stocks",
},
{
title: "German Companies on the US Stock Market",
link: "/list/german-stocks-us",
},
{
title: "Canadian Companies on the US Stock Market",
link: "/list/canadian-stocks-us",
},
{
title: "Chinese Companies on the US Stock Market",
link: "/list/chinese-stocks-us",
},
{
title: "Indian Companies on the US Stock Market",
link: "/list/indian-stocks-us",
},
{
title: "Israeli Companies on the US Stock Market",
link: "/list/israeli-stocks-us",
},
{
title: "UK Companies on the US Stock Market",
link: "/list/uk-stocks-us",
},
{
title: "Japanese Companies on the US Stock Market",
link: "/list/japanese-stocks-us",
},
{
title: "Financials Sector Stocks",
link: "/list/sector/financial",
},
{
title: "Healthcare Sector Stocks",
link: "/list/sector/healthcare",
},
{
title: "Technology Sector Stocks",
link: "/list/sector/technology",
},
{
title: "Industrials Sector Stocks",
link: "/list/sector/industrials",
},
{
title: "Energy Sector Stocks",
link: "/list/sector/energy",
},
{
title: "Utilities Sector Stocks",
link: "/list/sector/utilities",
},
{
title: "Consumer Cyclical Sector Stocks",
link: "/list/sector/consumer-cyclical",
},
{
title: "Real Estate Sector Stocks",
link: "/list/sector/real-estate",
},
{
title: "Basic Materials Sector Stocks",
link: "/list/sector/basic-materials",
},
{
title: "Communication Services Sector Stocks",
link: "/list/sector/communication-services",
},
{
title: "Consumer Defensive Sector Stocks",
link: "/list/sector/consumer-defensive",
},
{
title: "Delisted Companies",
link: "/list/delisted-stocks",
},
{
title: "Bitcoin ETFs",
link: "/list/bitcoin-etfs",
},
{
title: "Magnificent Seven Stocks",
link: "/list/magnificent-seven",
},
{
title: "Dividend Kings",
link: "/list/dividend-kings",
},
{
title: "Dividend Aristocrats",
link: "/list/dividend-aristocrats",
},
{
title: "All Active REITs on the US Stock Market",
link: "/list/reit-stocks",
},
];
navigation = [...navigationIndustry, ...navigation];
let updatedNavigation = navigation?.map((item) => {
return {
...item,
link: item.link + "/",
};
});
const combinedNavigation = navigation?.concat(updatedNavigation);
</script>
<svelte:head>
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
Lists · stocknear</title
>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta
name="description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Other meta tags -->
<meta property="og:title" content="Stock Lists · stocknear" />
<meta
property="og:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<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="Stock Lists · stocknear" />
<meta
name="twitter:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith("/list/industry")}
<li><a href="/industry" class="text-gray-300">Industry</a></li>
{:else}
<li><a href="/list/" class="text-gray-300">Lists</a></li>
{/if}
{#if $page.url.pathname.startsWith("/list/")}
<li>
<span class="text-gray-300">
{combinedNavigation?.find(
(item) => item?.link === $page.url.pathname,
)?.title}
</span>
</li>
{/if}
</ul>
</div>
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
<!--Start Top Winners/Losers-->
<div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2">
{#each navigation as item}
{#if item?.link === $page.url.pathname}
<span class="font-bold text-2xl">
{item?.title}
</span>
{/if}
{/each}
</div>
<div class="border-b-[2px] mt-2 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 -mt-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/watchlist/stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance.
</span>
</a>
</div>
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>