138 lines
4.8 KiB
Svelte
138 lines
4.8 KiB
Svelte
<script lang="ts">
|
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
|
import { page } from "$app/stores";
|
|
|
|
export let data;
|
|
|
|
const tabs = [
|
|
{
|
|
title: "Stocks",
|
|
path: "/watchlist/stocks",
|
|
},
|
|
{
|
|
title: "Options",
|
|
path: "/watchlist/options",
|
|
},
|
|
];
|
|
|
|
let activeIdx = 0;
|
|
|
|
// Subscribe to the $page store to reactively update the activeIdx based on the URL
|
|
$: if ($page.url.pathname === "/watchlist/stocks") {
|
|
activeIdx = 0;
|
|
} else if ($page.url.pathname.startsWith("/watchlist/options")) {
|
|
activeIdx = 1;
|
|
}
|
|
</script>
|
|
|
|
<!-- HEADER FOR BETTER SEO -->
|
|
<svelte:head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
</svelte:head>
|
|
|
|
<section
|
|
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
|
|
>
|
|
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
|
<ul>
|
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
|
<li class="text-gray-300">Watchlist</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="w-full overflow-hidden m-auto mt-5">
|
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
|
<div
|
|
class="relative flex justify-center items-start overflow-hidden w-full"
|
|
>
|
|
<main class="w-full lg:w-3/4 lg:pr-5">
|
|
<h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
|
|
Watchlist
|
|
</h1>
|
|
|
|
<nav class=" border-b-[2px] overflow-x-scroll whitespace-nowrap">
|
|
<ul
|
|
class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
|
|
>
|
|
{#each tabs as item, i}
|
|
<a
|
|
href={item?.path}
|
|
class="p-2 px-5 cursor-pointer {activeIdx === i
|
|
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
|
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
|
>
|
|
{item.title}
|
|
</a>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
|
|
<slot />
|
|
</main>
|
|
|
|
<aside class="hidden lg:block relative fixed w-1/4 ml-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 bg-primary sm:hover:bg-secondary transition ease-out duration-100"
|
|
>
|
|
<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 bg-primary sm:hover:bg-secondary transition ease-out duration-100"
|
|
>
|
|
<a
|
|
href={"/price-alert"}
|
|
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">
|
|
Price Alert
|
|
</h2>
|
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
|
</div>
|
|
<span class="text-white p-3 ml-3 mr-3">
|
|
Customize your alerts to never miss out again
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
|
|
>
|
|
<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>
|