AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-01-01 13:08:48 +01:00
parent c77cced136
commit b6facb9f07
1 changed files with 350 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/routes/stocks/[tickerID]/options/hottest-contracts/+page.svelte
View File

@ -2,6 +2,7 @@
import { abbreviateNumberWithColor } from "$lib/utils";
import * as HoverCard from "$lib/components/shadcn/hover-card/index.js";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let volumeList = data?.getData;
@ -31,6 +32,7 @@
<div
class="w-full relative flex justify-center items-center overflow-hidden"
>
{#if volumeList?.length > 0}
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<h2
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
@ -47,11 +49,13 @@
>Chain</td
>
<td class="text-white font-semibold text-sm text-end">Last</td>
<td class="text-white font-semibold text-sm text-end">Last</td
>
<td class="text-white font-semibold text-sm text-end"
>Low-High</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td
<td class="text-white font-semibold text-sm text-end"
>Volume</td
>
<td class="text-white font-semibold text-sm text-end">OI</td>
<td class="text-white font-semibold text-sm text-end"
@ -79,7 +83,13 @@
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{item?.strike_price}
<span
class={item?.option_type === "C"
? "text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{item?.option_type === "C" ? "Call" : "Put"}
</span>
{" " +
item?.date_expiration +
" " +
@ -214,14 +224,14 @@
<td class="text-white font-semibold text-sm text-center"
>Chain</td
>
<td class="text-white font-semibold text-sm text-end">Strike</td
>
<td class="text-white font-semibold text-sm text-end">Last</td>
<td class="text-white font-semibold text-sm text-end">Last</td
>
<td class="text-white font-semibold text-sm text-end"
>Low-High</td
>
<td class="text-white font-semibold text-sm text-end">Volume</td
<td class="text-white font-semibold text-sm text-end"
>Volume</td
>
<td class="text-white font-semibold text-sm text-end">OI</td>
<td class="text-white font-semibold text-sm text-end"
@ -247,18 +257,21 @@
>
<td
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
>
{item?.strike_price}
<span
class={item?.option_type === "C"
? "text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{item?.option_type === "C" ? "Call" : "Put"}
</span>
{" " +
item?.date_expiration +
" " +
`(${daysLeft(item?.date_expiration)})`}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
{item?.strike_price}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
>
@ -375,6 +388,18 @@
</div>
<UpgradeToPro {data} />
</div>
{:else}
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<h2
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
>
Hottest Contracts
</h2>
<div class="mt-2">
<Infobox text="No data is available" />
</div>
</div>
{/if}
</div>
</div>
</section>