update ipo page
This commit is contained in:
MuslemRahimi
parent
e1a5334870
commit
cf79e700bc
@ -67,18 +67,20 @@
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:pr-5">
|
||||
<h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
|
||||
<h1 class="mb-6 text-2xl sm:text-3xl font-bold">
|
||||
{activeIdx === 0 ? "Recent IPOs" : "IPO News"}
|
||||
</h1>
|
||||
|
||||
<nav class=" border-b-[2px] overflow-x-auto whitespace-nowrap">
|
||||
<ul class="flex flex-row items-center w-full text-lg text-white">
|
||||
<nav
|
||||
class=" border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-lg">
|
||||
{#each tabs as item, i}
|
||||
<a
|
||||
href={item?.path}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === i
|
||||
? 'text-white bg-primary/90 font-semibold'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
@ -87,18 +89,16 @@
|
||||
</nav>
|
||||
|
||||
{#if activeIdx === 0}
|
||||
<nav class=" overflow-x-auto whitespace-nowrap">
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-[1rem] text-white"
|
||||
>
|
||||
<nav class="overflow-x-auto whitespace-nowrap">
|
||||
<ul class="flex flex-row items-center w-full text-[1rem]">
|
||||
{#each ["Latest", "2025", "2024", "2023", "2022", "2021", "2020", "2019"] as item}
|
||||
{#if item !== "Latest"}
|
||||
<a
|
||||
href={`/ipos/${item}`}
|
||||
on:click={() => (displaySection = item)}
|
||||
class="p-2 px-5 cursor-pointer {displaySection === item
|
||||
? 'text-white bg-primary/90'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
@ -107,8 +107,8 @@
|
||||
href={`/ipos`}
|
||||
on:click={() => (displaySection = item)}
|
||||
class="p-2 px-5 cursor-pointer {displaySection === item
|
||||
? 'text-white bg-primary/90'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
/>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
<h2 class="text-white text-xl font- text-start mt-5 w-full font-semibold">
|
||||
<h2 class=" text-xl font- text-start mt-5 w-full font-semibold">
|
||||
Last {rawData?.length} IPOs
|
||||
</h2>
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
@ -60,11 +60,11 @@
|
||||
<aside class="hidden lg:block relative fixed w-1/4">
|
||||
{#if ipoNews?.length !== 0}
|
||||
<div
|
||||
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
||||
>
|
||||
<div class="p-4 text-sm">
|
||||
<h3 class="text-xl text-white font-bold mb-3">IPO News</h3>
|
||||
<ul class="text-white">
|
||||
<h3 class="text-xl font-bold mb-3">IPO News</h3>
|
||||
<ul class="">
|
||||
{#each ipoNews?.slice(0, 10) as item}
|
||||
<li class="mb-3 last:mb-1">
|
||||
{item?.timestamp}
|
||||
@ -79,7 +79,7 @@
|
||||
</ul>
|
||||
<a
|
||||
href={`/ipos/news`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
|
||||
>
|
||||
More IPO News
|
||||
</a>
|
||||
|
||||
@ -59,42 +59,33 @@
|
||||
<main class="w-full lg:w-3/4 lg:pr-10">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
{#if rawData?.length !== 0}
|
||||
<h2
|
||||
class="text-white text-xl font- text-start mt-5 w-full font-semibold"
|
||||
>
|
||||
<h2 class=" text-xl font- text-start mt-5 w-full font-semibold">
|
||||
{rawData?.length} IPOs
|
||||
</h2>
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table
|
||||
class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto overflow-hidden"
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
|
||||
>
|
||||
<thead class="bg-default">
|
||||
<thead class="text-muted dark:text-white">
|
||||
<tr>
|
||||
<th class="text-white font-semibold text-sm text-start"
|
||||
>IPO Date</th
|
||||
>
|
||||
<th class="text-white font-semibold text-sm text-start"
|
||||
>Symbol</th
|
||||
>
|
||||
<th class="text-white font-semibold text-sm">Name</th>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>IPO Price</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
<th class=" font-semibold text-sm text-start">IPO Date</th>
|
||||
<th class=" font-semibold text-sm text-start">Symbol</th>
|
||||
<th class=" font-semibold text-sm">Name</th>
|
||||
<th class=" font-semibold text-end text-sm">IPO Price</th>
|
||||
<th class=" font-semibold text-end text-sm"
|
||||
>Current Price</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>Return Since</th
|
||||
<th class=" font-semibold text-end text-sm">Return Since</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each ipoList as item}
|
||||
<tr
|
||||
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b-[#09090B]"
|
||||
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
|
||||
>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
|
||||
class=" text-sm sm:text-[1rem] whitespace-nowrap text-start whitespace-nowrap"
|
||||
>
|
||||
{new Date(item?.ipoDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
@ -105,7 +96,7 @@
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap text-start whitespace-nowrap"
|
||||
>
|
||||
<a
|
||||
href={"/stocks/" + item?.symbol}
|
||||
@ -115,10 +106,8 @@
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-gray-200 border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
|
||||
>
|
||||
<span class="text-white"
|
||||
<td class=" whitespace-nowrap text-sm sm:text-[1rem]">
|
||||
<span class=""
|
||||
>{item?.name?.length > charNumber
|
||||
? formatString(item?.name?.slice(0, charNumber)) +
|
||||
"..."
|
||||
@ -127,35 +116,33 @@
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
|
||||
class=" text-sm sm:text-[1rem] whitespace-nowrap text-end"
|
||||
>
|
||||
{item?.ipoPrice !== null ? item?.ipoPrice : "n/a"}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] text-end">
|
||||
{item?.currentPrice !== null
|
||||
? item?.currentPrice
|
||||
: "n/a"}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end"
|
||||
class=" text-end flex flex-row items-center justify-end"
|
||||
>
|
||||
{#if item?.return >= 0 && item?.return !== null}
|
||||
<span
|
||||
class="inline-block text-[#00FC50] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
class="inline-block text-green-600 dark:text-[#00FC50] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>+{abbreviateNumber(item?.return)}%</span
|
||||
>
|
||||
{:else if item?.return < 0 && item?.return !== null}
|
||||
<span
|
||||
class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
class="inline-block text-red-600 dark:text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>{abbreviateNumber(item?.return)}%
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
class="inline-block text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
n/a
|
||||
</span>
|
||||
@ -179,11 +166,11 @@
|
||||
<aside class="hidden lg:block relative fixed w-1/4">
|
||||
{#if ipoNews?.length !== 0}
|
||||
<div
|
||||
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
||||
>
|
||||
<div class="p-4 text-sm">
|
||||
<h3 class="text-xl text-white font-bold mb-3">IPO News</h3>
|
||||
<ul class="text-white">
|
||||
<h3 class="text-xl font-bold mb-3">IPO News</h3>
|
||||
<ul class="">
|
||||
{#each ipoNews?.slice(0, 10) as item}
|
||||
<li class="mb-3 last:mb-1">
|
||||
{item?.timestamp}
|
||||
@ -198,7 +185,7 @@
|
||||
</ul>
|
||||
<a
|
||||
href={`/ipos/news`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
|
||||
>
|
||||
More IPO News
|
||||
</a>
|
||||
|
||||
@ -89,14 +89,14 @@
|
||||
<div class="grid grid-cols-1 gap-y-3">
|
||||
{#if news?.length !== 0}
|
||||
{#each news as item, index}
|
||||
<div class="w-full flex flex-col bg-default rounded-md m-auto">
|
||||
{#if checkIfYoutubeVideo(item.link)}
|
||||
<div class="w-full flex flex-col rounded-md m-auto">
|
||||
{#if checkIfYoutubeVideo(item?.link)}
|
||||
{#if showVideo[index]}
|
||||
<!-- Show the YouTube iframe when the user clicks play -->
|
||||
<div class="w-full aspect-video mb-4">
|
||||
<iframe
|
||||
class="w-full h-full rounded-md border border-gray-800"
|
||||
src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.link)}`}
|
||||
class="w-full h-full rounded-md border border-gray-300 dark:border-gray-800"
|
||||
src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item?.link)}`}
|
||||
frameborder="0"
|
||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
@ -108,7 +108,7 @@
|
||||
<div class="mb-3 sm:order-3 lg:pr-2">
|
||||
<div
|
||||
class="group relative block cursor-pointer bg-black bg-cover bg-[center_50%] object-contain after:block after:pb-[56.25%] after:content-[''] rounded-sm focus:outline-hidden focus:ring-2 focus:ring-blue-brand_light focus:ring-offset-2"
|
||||
style="background-image: url({item?.img});"
|
||||
style="background-image: url({item?.image});"
|
||||
tabindex="0"
|
||||
on:click={() => handlePlayClick(index)}
|
||||
>
|
||||
@ -120,17 +120,19 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mt-3 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
{item}
|
||||
<h3
|
||||
class="text-sm text-muted dark:text-white/80 truncate mb-2"
|
||||
>
|
||||
{item?.timestamp}
|
||||
</h3>
|
||||
<a
|
||||
href={item?.link}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-lg sm:text-xl font-bold text-white"
|
||||
class="text-lg sm:text-xl font-bold"
|
||||
>
|
||||
{item?.title}
|
||||
<p class="text-white text-sm mt-2 font-normal">
|
||||
<p class=" text-sm mt-2 font-normal">
|
||||
{item?.description?.length > 200
|
||||
? item?.description?.slice(0, 200) + "..."
|
||||
: item?.description}
|
||||
@ -144,7 +146,7 @@
|
||||
href={item?.link}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
|
||||
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-300 dark:border-gray-800 rounded-md"
|
||||
>
|
||||
<div class="shrink-0 m-auto">
|
||||
<img
|
||||
@ -156,17 +158,19 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="mt-3 sm:mt-0 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
<h3
|
||||
class="text-sm text-muted dark:text-white/80 truncate mb-2"
|
||||
>
|
||||
{item?.timestamp}
|
||||
</h3>
|
||||
<a
|
||||
href={item?.url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-lg sm:text-xl font-bold text-white"
|
||||
class="text-lg sm:text-xl font-bold"
|
||||
>
|
||||
{item?.title}
|
||||
<p class="text-white text-sm mt-2 font-normal">
|
||||
<p class=" text-sm mt-2 font-normal">
|
||||
{item?.description?.length > 200
|
||||
? item?.description?.slice(0, 200) + "..."
|
||||
: item?.description}
|
||||
@ -176,7 +180,9 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
|
||||
<hr
|
||||
class="border-gray-300 dark:border-gray-600 w-full m-auto mt-5 mb-5"
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
@ -185,11 +191,11 @@
|
||||
<aside class="hidden lg:block relative fixed w-1/4">
|
||||
{#if marketNews?.length !== 0}
|
||||
<div
|
||||
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-2 mt-4 cursor-pointer bg-inherit"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
||||
>
|
||||
<div class="p-4 text-sm">
|
||||
<h3 class="text-xl text-white font-bold mb-3">Stocks News</h3>
|
||||
<ul class="text-white">
|
||||
<h3 class="text-xl font-bold mb-3">IPO News</h3>
|
||||
<ul class="">
|
||||
{#each marketNews?.slice(0, 10) as item}
|
||||
<li class="mb-3 last:mb-1">
|
||||
{formatDate(item?.publishedDate)} ago -
|
||||
@ -205,7 +211,7 @@
|
||||
</ul>
|
||||
<a
|
||||
href={`/market-news`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-5 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
|
||||
>
|
||||
More Stocks News
|
||||
</a>
|
||||
|
||||
@ -121,7 +121,9 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mt-3 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
<h3
|
||||
class="text-sm text-muted dark:text-white/80 truncate mb-2"
|
||||
>
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
@ -157,7 +159,9 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="mt-3 sm:mt-0 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
<h3
|
||||
class="text-sm text-muted dark:text-white/80 truncate mb-2"
|
||||
>
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
|
||||
@ -121,7 +121,9 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mt-3 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
<h3
|
||||
class="text-sm text-muted dark:text-white/80 truncate mb-2"
|
||||
>
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
@ -157,7 +159,9 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="mt-3 sm:mt-0 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
<h3
|
||||
class="text-sm text-muted dark:text-white/80 truncate mb-2"
|
||||
>
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user