This commit is contained in:
MuslemRahimi 2024-11-03 21:23:15 +01:00
parent 9f46259950
commit 80a41848fc
75 changed files with 5812 additions and 3686 deletions

View File

@ -504,7 +504,7 @@
<!--
<div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
<svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
><path fill="#a474f6" 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
><path fill="#FBCE3C" 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
>
For the current Fiscal Year we use available quarterly data. Complete annual data, used to compare against analyst estimates, is only finalized after the year ends.
</div>

View File

@ -347,7 +347,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -1,38 +1,48 @@
<script>
export let title;
export let content;
export let id;
export let title;
export let content;
export let id;
</script>
<div class="relative">
<label for={id} class="absolute -bottom-1 left-0 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
<svg class="h-[10.5px] w-[10.5px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
</svg>
</label>
<label
for={id}
class="absolute -bottom-1 left-0 cursor-pointer p-1 text-gray-800 sm:hover:text-white"
>
<svg
class="h-[10.5px] w-[10.5px]"
viewBox="0 0 4 16"
fill="white"
style="max-width:20px"
>
<path
d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"
></path>
</svg>
</label>
</div>
<!-- Desktop modal using dialog component -->
<input type="checkbox" id={id} class="modal-toggle" />
<!-- Desktop modal using dialog component -->
<input type="checkbox" {id} class="modal-toggle" />
<dialog id={id} class="modal modal-bottom sm:modal-middle">
<label for={id} class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
<dialog {id} class="modal modal-bottom sm:modal-middle">
<label
for={id}
class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
></label>
<!-- Desktop modal content -->
<div class="modal-box w-full bg-[#191919] flex flex-col items-center">
<div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full bg-[#404040]" />
<div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full" />
<div class="text-white mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{title}</h3>
<span class="text-white text-[1rem] font-normal">{@html content}</span>
</div>
<label for={id} class="sm:hidden cursor-pointer px-7 py-2 mb-5 rounded-full bg-[#0DDE00] text-center text-black text-[1rem] font-normal">OK</label>
<label
for={id}
class="sm:hidden cursor-pointer px-7 py-2 mb-5 rounded-full bg-[#0DDE00] text-center text-black text-[1rem] font-normal"
>OK</label
>
</div>
</dialog>

View File

@ -257,7 +257,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -1,300 +1,198 @@
<script lang 'ts'></script>
<script lang ='ts'>
import { shareStatisticsComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from "$lib/utils";
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden">
<div class="flex flex-row items-center">
<label
for="shareStatisticsInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
>
Share Statistics
</label>
<InfoModal
title={"Share Statistics"}
content={"Shares outstanding refer to a company's stock currently held by all its shareholders. Floating shares refer to the number of a company's shares that are actively traded and available for public trading on the stock market."}
id={"shareStatisticsInfo"}
/>
</div>
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
export let data;
let isLoaded = false;
let rawData = {};
let optionsData;
function getPlotOptions() {
let dates = [];
let floatShares = [];
let outstandingShares = [];
// Iterate over the data and extract required information
rawData?.historicalShares?.forEach(item => {
dates?.push(item?.date);
floatShares?.push(item?.floatShares);
outstandingShares?.push(item?.outstandingShares);
});
const option = {
silent: true,
animation: false,
tooltip: {
trigger: 'axis',
hideDelay: 100, // Set the delay in milliseconds
},
grid: {
left: $screenWidth < 640 ? '3%' : '2%',
right: $screenWidth < 640 ? '3%' : '2%',
bottom: $screenWidth < 640 ? '0%' : '2%',
top: '5%',
containLabel: true
},
xAxis: {
data: dates,
type: 'category',
axisLabel: {
color: '#fff',
}
},
yAxis: [
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
show: false // Hide y-axis labels
}
},
],
series: [
{ name: 'Floating Shares',
data: floatShares,
type: 'bar',
itemStyle: {
color: '#3B82F6' // Change bar color to white
}
},
{ name: 'Outstanding Shares',
data: outstandingShares,
type: 'bar',
itemStyle: {
color: '#E11D48'
}
},
]
};
return option;
}
const getShareStatistics = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getShareStatistics');
if (cachedData) {
rawData = cachedData;
} else {
const postData = {'ticker': ticker, path: 'share-statistics'};
// make the POST request to the endpoint
const response = await fetch('/api/ticker-data', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
});
rawData = await response?.json();
// Cache the data for this specific tickerID with a specific name 'getShareStatistics'
setCache(ticker, rawData, 'getShareStatistics');
}
if (Object?.keys(rawData)?.length !== 0) {
$shareStatisticsComponent = true;
} else {
$shareStatisticsComponent = false;
}
};
$: {
if($stockTicker && typeof window !== 'undefined') {
isLoaded=false;
const asyncFunctions = [
getShareStatistics($stockTicker)
];
Promise.all(asyncFunctions)
.then((results) => {
optionsData = getPlotOptions()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
</script>
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden ">
<div class="flex flex-row items-center">
<label for="shareStatisticsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
Share Statistics
</label>
<InfoModal
title={"Share Statistics"}
content={"Shares outstanding refer to a company's stock currently held by all its shareholders. Floating shares refer to the number of a company's shares that are actively traded and available for public trading on the stock market."}
id={"shareStatisticsInfo"}
/>
{#if isLoaded}
{#if Object?.keys(rawData)?.length !== 0}
{#if rawData?.historicalShares?.length !== 0}
<div class="mt-2 pb-4 bg-[#09090B]">
<div class="w-full flex flex-col items-start">
<div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
{$displayCompanyName}'s' has
<span class="font-semibold"
>{abbreviateNumber(rawData?.latestOutstandingShares)}</span
>
shares outstanding with
<span class="font-semibold"
>{abbreviateNumber(rawData?.latestFloatShares)}</span
> of those shares currently floating.
</div>
</div>
{#if isLoaded}
{#if Object?.keys(rawData)?.length !== 0}
<div class="app w-full h-[300px] mt-6">
<Chart {init} options={optionsData} class="chart" />
</div>
{#if rawData?.historicalShares?.length !== 0}
<div class="mt-2 pb-4 bg-[#09090B]">
<div class="w-full flex flex-col items-start">
<div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
{$displayCompanyName}'s' has <span class="font-semibold">{abbreviateNumber(rawData?.latestOutstandingShares)}</span> shares outstanding with <span class="font-semibold">{abbreviateNumber(rawData?.latestFloatShares)}</span> of those shares currently floating.
</div>
</div>
<div class="app w-full h-[300px] mt-6">
<Chart {init} options={optionsData} class="chart" />
</div>
<div class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12">
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-sm sm:font-semibold inline-block">
Floating Shares
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#C12F23] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-sm sm:font-semibold inline-block">
Outstanding Shares
</span>
</div>
</div>
</div>
{:else}
<div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
<svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" 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>
Historical Shares are not available yet for {$displayCompanyName}
</div>
{/if}
<div
class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12"
>
<div
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
>
<div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#5470C6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-center sm:text-start text-sm sm:font-semibold inline-block"
>
Floating Shares
</span>
</div>
<div
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
>
<div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#C12F23] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-sm sm:font-semibold inline-block"
>
Outstanding Shares
</span>
</div>
</div>
</div>
{:else}
<div
class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4"
>
<svg
class="w-5 h-5 inline-block mr-0.5 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#FBCE3C"
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
>
Historical Shares are not available yet for {$displayCompanyName}
</div>
{/if}
{#if rawData?.sharesShort !== 0}
<h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3">
Short Selling Information
</h2>
<span class="text-white">
The latest short interest is <span class="font-semibold"> {abbreviateNumber(rawData?.sharesShort)}</span>, so <span class="font-semibold">{rawData?.shortOutStandingPercent}%</span> of the outstanding shares have been sold short.
</span>
{#if rawData?.sharesShort !== 0}
<h2
class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"
>
Short Selling Information
</h2>
<span class="text-white">
The latest short interest is <span class="font-semibold">
{abbreviateNumber(rawData?.sharesShort)}</span
>, so
<span class="font-semibold"
>{rawData?.shortOutStandingPercent}%</span
> of the outstanding shares have been sold short.
</span>
<div class="flex justify-start items-center w-full m-auto mt-6 ">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Interest</span>
</td>
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{abbreviateNumber(rawData?.sharesShort)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Previous Month</span>
</td>
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{abbreviateNumber(rawData?.sharesShortPriorMonth)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Shares Out</span>
</td>
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{rawData?.shortOutStandingPercent}%
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Float</span>
</td>
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{rawData?.shortFloatPercent}%
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Ratio (days to cover)</span>
</td>
<td class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{rawData?.shortRatio}
</td>
</tr>
</tbody>
<div class="flex justify-start items-center w-full m-auto mt-6">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Interest</span>
</td>
<td
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{abbreviateNumber(rawData?.sharesShort)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Previous Month</span>
</td>
<td
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{abbreviateNumber(rawData?.sharesShortPriorMonth)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Shares Out</span>
</td>
<td
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{rawData?.shortOutStandingPercent}%
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short % of Float</span>
</td>
<td
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{rawData?.shortFloatPercent}%
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Short Ratio (days to cover)</span>
</td>
<td
class="whitespace-nowrap px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{rawData?.shortRatio}
</td>
</tr>
</tbody>
</table>
</div>
{/if}
{/if}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if}
</main>
</section>
</div>
{/if}
{/if}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if}
</main>
</section>
<style>
.app {
.app {
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
.app {
height: 230px;
}
height: 230px;
}
}
.chart {
.chart {
width: 100%;
}
</style>
}
</style>

View File

@ -36,7 +36,7 @@
}
</script>
<section class="overflow-hidden text-white h-full">
<section class="overflow-hidden text-white h-full mt-5">
<main class="overflow-hidden">
<div class="flex flex-row items-center">
<label
@ -69,57 +69,25 @@
<!--Start Item-->
<div class="flex flex-row items-center w-full mb-6">
<div
class="w-full rounded-md pr-4 {latestInfoDate(
item?.date,
)
? 'bg-[#F9AB00] bg-opacity-[0.1]'
: 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4"
class="w-full border-b border-gray-600 h-full pt-2 pb-4"
>
<div class="flex flex-col items-start">
<div class="flex flex-row items-start w-full pt-2">
<span class="text-white text-sm pl-2 italic"
<span class="text-white text-sm italic"
>Updated {item?.date}</span
>
{#if latestInfoDate(item?.date)}
<label
class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3"
class="bg-[#FBCE3C] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
>New</label
>
{/if}
<div class="text-white text-sm ml-auto font-medium">
{#if item?.changesPercentage >= 0}
<svg
class="w-5 h-5 -mr-0.5 -mt-0.5 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><g id="evaArrowUpFill0"
><g id="evaArrowUpFill1"
><path
id="evaArrowUpFill2"
fill="#00FC50"
d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
/></g
></g
></svg
>
<span class="text-[#00FC50] inline-block"
>+{item?.changesPercentage}%</span
>
{:else if item?.changesPercentage < 0}
<svg
class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><g id="evaArrowUpFill0"
><g id="evaArrowUpFill1"
><path
id="evaArrowUpFill2"
fill="#FF2F1F"
d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
/></g
></g
></svg
>
<span class="text-[#FF2F1F] inline-block"
>{item?.changesPercentage}%
</span>
@ -127,9 +95,7 @@
</div>
</div>
<div
class="flex flex-col w-full max-w-3xl pt-2 pl-2 pr-2 sm:pr-0"
>
<div class="flex flex-col w-full max-w-3xl pt-2">
<span class="text-white text-[1rem]">
{item?.text}
</span>
@ -166,7 +132,7 @@
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
class="bg-[#09090B] h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>

View File

@ -1,23 +1,23 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = TabsPrimitive.TriggerProps;
type $$Events = TabsPrimitive.TriggerEvents;
type $$Props = TabsPrimitive.TriggerProps;
type $$Events = TabsPrimitive.TriggerEvents;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"];
export { className as class };
let className: $$Props["class"] = undefined;
export let value: $$Props["value"];
export { className as class };
</script>
<TabsPrimitive.Trigger
class={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-purple-600 data-[state=active]:text-white data-[state=active]:shadow-sm",
className
)}
{value}
{...$$restProps}
on:click
class={cn(
" inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#FBCE3C] data-[state=active]:text-black data-[state=active]:shadow-sm",
className,
)}
{value}
{...$$restProps}
on:click
>
<slot />
</TabsPrimitive.Trigger>
<slot />
</TabsPrimitive.Trigger>

View File

@ -397,7 +397,7 @@
>
<a
href="/options-flow"
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-white text-black"
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
>
View All
<ArrowUpRight
@ -594,7 +594,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -616,7 +616,7 @@
>
<a
href="/earnings-calendar"
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-white text-black"
class="ml-auto rounded-lg text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
>
View All
<ArrowUpRight
@ -680,7 +680,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -759,7 +759,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -183,7 +183,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

File diff suppressed because it is too large Load Diff

View File

@ -186,7 +186,7 @@
viewBox="0 0 256 256"
>
<path
fill="#a474f6"
fill="#FBCE3C"
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>

View File

@ -173,7 +173,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -1,157 +1,192 @@
<script lang='ts'>
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
<script lang="ts">
import {
numberOfUnreadNotification,
displayCompanyName,
cryptoTicker,
} from "$lib/store";
export let data;
const formatDate = (dateString) => {
// Create a date object for the input dateString
const inputDate = new Date(dateString);
// Create a date object for the current time in New York City
const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
const currentNYCDate = new Date(nycTime);
// Calculate the difference in milliseconds
const difference = inputDate.getTime() - currentNYCDate.getTime();
// Convert the difference to minutes
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) {
return `${minutes} minutes`;
} else if (minutes < 1440) {
const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? 's' : ''}`;
} else {
const days = Math.round(minutes / 1440);
return `${days} day${days !== 1 ? 's' : ''}`;
}
};
// Create a date object for the input dateString
const inputDate = new Date(dateString);
// Create a date object for the current time in New York City
const nycTime = new Date().toLocaleString("en-US", {
timeZone: "America/New_York",
});
const currentNYCDate = new Date(nycTime);
// Calculate the difference in milliseconds
const difference = inputDate.getTime() - currentNYCDate.getTime();
// Convert the difference to minutes
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) {
return `${minutes} minutes`;
} else if (minutes < 1440) {
const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? "s" : ""}`;
} else {
const days = Math.round(minutes / 1440);
return `${days} day${days !== 1 ? "s" : ""}`;
}
};
let rawNews = data?.getStockNews;
let newsList = rawNews?.slice(0,20) ?? [];
let newsList = rawNews?.slice(0, 20) ?? [];
let videoId = null;
function checkIfYoutubeVideo(link) {
const url = new URL(link);
if (url?.hostname === "www.youtube.com") {
const url = new URL(link);
if (url?.hostname === "www.youtube.com") {
const searchParams = url.searchParams;
searchParams.delete('t'); // Remove the "t" parameter
searchParams.delete("t"); // Remove the "t" parameter
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
if (videoIdMatch) {
return videoIdMatch[1];
return videoIdMatch[1];
}
} else {
} else {
return null;
}
}
}
function loadMoreData() {
const nextIndex = newsList?.length;
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
newsList = [...newsList, ...newArticles];
}
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear
</title>
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
<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={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden ">
<main class="">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-white font-bold">
News
</h1>
</div>
{#if newsList?.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item}
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)}
<iframe
class="w-full h-96 rounded-lg border border-gray-800"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
{:else}
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
<div class="flex-shrink-0 m-auto ">
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}
<div class="mb-1 w-full">
<h3 class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3">
{item?.site} · {formatDate(item?.publishedDate)} ago
</h3>
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
{item?.text}
</p>
</a>
</div>
</div>
<hr class="border-blue-400 w-full m-auto mt-5 mb-5">
{/each}
</div>
{#if newsList?.length !== rawNews?.length}
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
Load More News
</label>
{/if}
{:else}
<div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg 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="#a474f6" 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>
No news article published yet!
</div>
{/if}
</div>
</main>
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and
Breaking Stories · stocknear
</title>
<meta
name="description"
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}
/>
<meta
property="og:description"
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
/>
<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={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}
/>
<meta
name="twitter:description"
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="m-auto h-full overflow-hidden">
<main class="">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-white font-bold">News</h1>
</div>
{#if newsList?.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item}
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
{#if (videoId = checkIfYoutubeVideo(item.url))}
<iframe
class="w-full h-96 rounded-lg border border-gray-800"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
{:else}
<a
href={item?.url}
rel="noopener noreferrer"
target="_blank"
class="border border-gray-800 rounded-lg"
>
<div class="flex-shrink-0 m-auto">
<img
src={item?.image}
class=" w-full rounded-lg"
alt="news image"
loading="lazy"
/>
</div>
</a>
{/if}
<div class="mb-1 w-full">
<h3
class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3"
>
{item?.site} · {formatDate(item?.publishedDate)} ago
</h3>
<a
href={item?.url}
rel="noopener noreferrer"
target="_blank"
class="text-lg font-bold text-white"
>
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
{item?.text}
</p>
</a>
</div>
</div>
<hr class="border-blue-400 w-full m-auto mt-5 mb-5" />
{/each}
</div>
{#if newsList?.length !== rawNews?.length}
<label
on:click={loadMoreData}
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
>
Load More News
</label>
{/if}
{:else}
<div
class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg 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="#FBCE3C"
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
>
No news article published yet!
</div>
{/if}
</div>
</section>
</main>
</div>
</section>

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,6 @@
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
@ -279,7 +278,7 @@
<div class="w-full overflow-x-scroll">
<!-- Cards -->
<div
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
class=" w-full flex flex-row justify-center m-auto items-center"
>
<!-- Start Columns -->
<label
@ -300,16 +299,16 @@
</label>
{#each weekday as day, index}
<div
class="w-full {index === selectedWeekday
class="w-full text-white {index === selectedWeekday
? ''
: 'hidden sm:block'}"
>
<label
on:click={() => toggleDate(index)}
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
class=" m-auto w-full cursor-pointer h-16 {index ===
selectedWeekday
? 'bg-purple-600 sm:hover:bg-purple-700'
: ''} rounded-lg sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
? 'bg-[#FBCE3C] text-black font-semibold'
: ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
>
<div
class=" flex flex-row justify-center items-center w-full"
@ -325,15 +324,15 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
fill="black"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
<div
class="flex flex-col items-center text-white truncate m-auto p-1"
class="flex flex-col items-center truncate m-auto p-1"
>
<span class="font-medium text-[1rem]"
<span class="text-[1rem]"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
@ -351,7 +350,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
fill="black"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
@ -495,7 +494,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -276,10 +276,10 @@
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<!-- Cards -->
<div
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
class=" w-full flex flex-row justify-center m-auto items-center"
>
<!-- Start Columns -->
<label
@ -300,16 +300,16 @@
</label>
{#each weekday as day, index}
<div
class="w-full {index === selectedWeekday
class="w-full text-white {index === selectedWeekday
? ''
: 'hidden sm:block'}"
>
<label
on:click={() => toggleDate(index)}
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
class=" m-auto w-full cursor-pointer h-16 {index ===
selectedWeekday
? 'bg-purple-600 sm:hover:bg-purple-700'
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
? 'bg-[#FBCE3C] text-black font-semibold'
: ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
>
<div
class=" flex flex-row justify-center items-center w-full"
@ -325,15 +325,15 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
fill="black"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
<div
class="flex flex-col items-center text-white truncate m-auto p-1"
class="flex flex-col items-center truncate m-auto p-1"
>
<span class="font-medium text-md"
<span class="text-[1rem]"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
@ -351,7 +351,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
fill="black"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
@ -382,21 +382,21 @@
{#if index === selectedWeekday}
{#if day?.length !== 0}
<h2 class="font-semibold text-white text-xl mt-5">
{formattedWeekday[index]?.split(", ")[1]} · {day?.length} Earnings
{formattedWeekday[index]?.split(", ")[1]} · {day?.length} Dividends
</h2>
<div class="w-full overflow-x-scroll no-scrollbar">
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4"
>
<thead>
<tr class="whitespace-nowrap">
<th
class="text-start text-white font-semibold text-sm"
<tr
class="whitespace-nowrap border-b border-[#27272A]"
>
<th class="text-white font-semibold text-sm"
>Symbol</th
>
<th
class="text-start text-white font-semibold text-sm"
<th class="text-white font-semibold text-sm"
>Company Name</th
>
<th
@ -405,44 +405,45 @@
>
<th
class="text-white font-semibold text-sm text-end"
>Revenue Estimate</th
>Revenue</th
>
<th
class="text-white font-semibold text-sm text-end"
>Cash Amount</th
>
<th
class="text-white font-semibold text-sm text-end"
>EPS Estimate</th
>
<th
class="text-white font-semibold text-sm text-end text-end"
>Earnings Time</th
>Payment Date</th
>
</tr>
</thead>
<tbody>
{#each day as item, index}
{#each day as item}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td
class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"
class="border-b-[#09090B] text-sm sm:text-[1rem]"
>
<a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>{item?.symbol}</a
>
class="text-blue-400 sm:hover:text-white"
>{item?.symbol}
</a>
</td>
<td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"
class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
>
{item?.name.length > 20
? item?.name?.slice(0, 20) + "..."
? item?.name.slice(0, 20) + "..."
: item?.name}
</td>
<td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]"
class="text-white border-b-[#09090B] text-sm text-end sm:text-[1rem]"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
@ -450,101 +451,35 @@
</td>
<td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
>
<div
class="flex flex-row items-center justify-end"
>
<span>
{item?.revenueEst !== null
? abbreviateNumber(item?.revenueEst)
: "-"}
</span>
{#if item?.revenueEst !== null && item?.revenueEst !== null}
{#if item?.revenueEst / item?.revenuePrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]">
+{(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span>
{:else}
<span class="ml-1 text-[#FF2F1F]">
{(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span>
{/if}
{/if}
</div>
{item?.revenue !== null
? abbreviateNumber(item?.revenue)
: "-"}
</td>
<td
class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem] text-end"
>
{item?.adjDividend !== null
? item?.adjDividend?.toFixed(3)
: "-"}
</td>
<td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span>
{item?.epsEst !== null
? item?.epsEst?.toFixed(2)
: "-"}
</span>
{#if item?.epsEst !== null && item?.epsPrior !== null}
{#if item?.epsEst / item?.epsPrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]">
+{(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span>
{:else}
<span class="ml-1 text-[#FF2F1F]">
{(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span>
{/if}
{/if}
</div>
</td>
<td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{#if item?.release === "amc"}
<svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#70A1EF"
d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
/></svg
>
After Close
{:else}
<svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><g fill="#FEC001"
><path
d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z"
opacity=".2"
/><path
d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"
/></g
></svg
>
Before Open
{/if}
{item?.paymentDate !== null
? new Date(item?.paymentDate)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: "-"}
</td>
</tr>
{/each}
@ -560,11 +495,11 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
No Earnings available for the day.
No Dividends available for the day.
</div>
{/if}
{/if}

View File

@ -8,7 +8,6 @@
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import logo from "$lib/images/transcripts_logo.png";
import { abbreviateNumber, listOfRelevantCountries } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@ -224,7 +223,7 @@
<div class="relative flex flex-col flex-1 overflow-hidden">
<!-- Cards -->
<div
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
class=" w-full flex flex-row justify-center m-auto items-center"
>
<!-- Start Columns -->
<label
@ -245,16 +244,16 @@
</label>
{#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index}
<div
class="w-full {index === selectedWeekday
class="w-full text-white {index === selectedWeekday
? ''
: 'hidden sm:block'}"
>
<label
on:click={() => toggleDate(index)}
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
class=" m-auto w-full cursor-pointer h-16 {index ===
selectedWeekday
? 'bg-purple-600 sm:hover:bg-purple-700'
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
? 'bg-[#FBCE3C] text-black font-semibold'
: ''} rounded sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
>
<div
class=" flex flex-row justify-center items-center w-full"
@ -268,17 +267,15 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
fill="black"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
<div
class="flex flex-col items-center text-white truncate m-auto p-1"
class="flex flex-col items-center truncate m-auto p-1"
>
<span class="font-medium text-md"
>{formattedWeekday[index]}</span
>
<span class="text-md">{formattedWeekday[index]}</span>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
{day?.length} Events</span
>
@ -292,7 +289,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
fill="black"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
@ -707,7 +704,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -173,7 +173,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -153,7 +153,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -198,7 +198,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -1,157 +1,192 @@
<script lang='ts'>
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
<script lang="ts">
import {
numberOfUnreadNotification,
displayCompanyName,
etfTicker,
} from "$lib/store";
export let data;
const formatDate = (dateString) => {
// Create a date object for the input dateString
const inputDate = new Date(dateString);
// Create a date object for the current time in New York City
const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
const currentNYCDate = new Date(nycTime);
// Calculate the difference in milliseconds
const difference = inputDate.getTime() - currentNYCDate.getTime();
// Convert the difference to minutes
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) {
return `${minutes} minutes`;
} else if (minutes < 1440) {
const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? 's' : ''}`;
} else {
const days = Math.round(minutes / 1440);
return `${days} day${days !== 1 ? 's' : ''}`;
}
};
// Create a date object for the input dateString
const inputDate = new Date(dateString);
// Create a date object for the current time in New York City
const nycTime = new Date().toLocaleString("en-US", {
timeZone: "America/New_York",
});
const currentNYCDate = new Date(nycTime);
// Calculate the difference in milliseconds
const difference = inputDate.getTime() - currentNYCDate.getTime();
// Convert the difference to minutes
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) {
return `${minutes} minutes`;
} else if (minutes < 1440) {
const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? "s" : ""}`;
} else {
const days = Math.round(minutes / 1440);
return `${days} day${days !== 1 ? "s" : ""}`;
}
};
let rawNews = data?.getStockNews;
let newsList = rawNews?.slice(0,20) ?? [];
let newsList = rawNews?.slice(0, 20) ?? [];
let videoId = null;
function checkIfYoutubeVideo(link) {
const url = new URL(link);
if (url?.hostname === "www.youtube.com") {
const url = new URL(link);
if (url?.hostname === "www.youtube.com") {
const searchParams = url.searchParams;
searchParams.delete('t'); // Remove the "t" parameter
searchParams.delete("t"); // Remove the "t" parameter
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
if (videoIdMatch) {
return videoIdMatch[1];
return videoIdMatch[1];
}
} else {
} else {
return null;
}
}
}
function loadMoreData() {
const nextIndex = newsList?.length;
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
newsList = [...newsList, ...newArticles];
}
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear
</title>
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<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={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden ">
<main class="">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-white font-bold">
News
</h1>
</div>
{#if newsList.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item}
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)}
<iframe
class="w-full h-96 rounded-lg border border-gray-800"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
{:else}
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
<div class="flex-shrink-0 m-auto ">
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}
<div class="mb-1 w-full">
<h3 class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3">
{item?.site} · {formatDate(item?.publishedDate)} ago
</h3>
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
{item?.text}
</p>
</a>
</div>
</div>
<hr class="border-blue-400 w-full m-auto mt-5 mb-5">
{/each}
</div>
{#if newsList?.length !== rawNews?.length}
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
Load More News
</label>
{/if}
{:else}
<div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg 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="#a474f6" 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>
No news article published yet!
</div>
{/if}
</div>
</main>
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking
Stories · stocknear
</title>
<meta
name="description"
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}
/>
<meta
property="og:description"
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`}
/>
<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={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}
/>
<meta
name="twitter:description"
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="m-auto h-full overflow-hidden">
<main class="">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-white font-bold">News</h1>
</div>
{#if newsList.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item}
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
{#if (videoId = checkIfYoutubeVideo(item.url))}
<iframe
class="w-full h-96 rounded-lg border border-gray-800"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
{:else}
<a
href={item?.url}
rel="noopener noreferrer"
target="_blank"
class="border border-gray-800 rounded-lg"
>
<div class="flex-shrink-0 m-auto">
<img
src={item?.image}
class=" w-full rounded-lg"
alt="news image"
loading="lazy"
/>
</div>
</a>
{/if}
<div class="mb-1 w-full">
<h3
class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3"
>
{item?.site} · {formatDate(item?.publishedDate)} ago
</h3>
<a
href={item?.url}
rel="noopener noreferrer"
target="_blank"
class="text-lg font-bold text-white"
>
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
{item?.text}
</p>
</a>
</div>
</div>
<hr class="border-blue-400 w-full m-auto mt-5 mb-5" />
{/each}
</div>
{#if newsList?.length !== rawNews?.length}
<label
on:click={loadMoreData}
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
>
Load More News
</label>
{/if}
{:else}
<div
class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg 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="#FBCE3C"
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
>
No news article published yet!
</div>
{/if}
</div>
</section>
</main>
</div>
</section>

View File

@ -573,7 +573,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -710,7 +710,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -1118,7 +1118,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

File diff suppressed because it is too large Load Diff

View File

@ -52,7 +52,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -157,7 +157,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -152,7 +152,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

File diff suppressed because it is too large Load Diff

View File

@ -339,12 +339,10 @@
async function getPerformancePlot() {
// Initialize boughtList and soldList arrays
const data = rawData?.summary
?.slice(0, 20)
?.map((item) => ({
date: item?.date,
performancePercentage: item?.performancePercentage,
}));
const data = rawData?.summary?.slice(0, 20)?.map((item) => ({
date: item?.date,
performancePercentage: item?.performancePercentage,
}));
data.sort((a, b) => new Date(a?.date) - new Date(b?.date));
@ -1715,7 +1713,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -70,7 +70,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -191,7 +191,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -53,7 +53,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -89,7 +89,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -239,7 +239,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -1,105 +1,129 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
<script lang="ts">
import { goto } from "$app/navigation";
import { screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
export let data;
export let data;
let rawData = data?.getETFBitcoinList;
let rawData = data?.getETFBitcoinList;
const totalAssets = rawData?.reduce((total, etf) => total + etf?.totalAssets, 0);
const avgExpenseRatio = rawData?.reduce(
(total, item) => total + item?.expenseRatio || 0,
0
) / rawData?.length;
const totalAssets = rawData?.reduce(
(total, etf) => total + etf?.totalAssets,
0,
);
const avgExpenseRatio =
rawData?.reduce((total, item) => total + item?.expenseRatio || 0, 0) /
rawData?.length;
$: charNumber = $screenWidth < 640 ? 15 : 20;
$: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
<section class="w-full overflow-hidden m-auto">
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#a474f6" 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 all Bitcoin ETFs available for trading on the US stock market, offering investors exposure to the cryptocurrency's price.
</div>
<div
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#FBCE3C"
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 all Bitcoin ETFs available for trading on the US stock market,
offering investors exposure to the cryptocurrency's price.
</div>
<div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-lg">
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total ETFs</div>
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total ETFs
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Assets</div>
<div class="stat-value text-lg font-semibold text-white">${abbreviateNumber(totalAssets)}</div>
<div class="stat-value text-lg font-semibold text-white">
{rawData?.length}
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Avg. Cost</div>
<div class="stat-value text-lg font-semibold text-white">{avgExpenseRatio?.toFixed(2)}%</div>
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-white font-semibold text-[1rem] whitespace-nowrap">Fund Name</th>
<th class="text-white font-semibold text-end sm:text-start text-[1rem]">Assets</th>
<th class="text-white font-semibold text-[1rem] text-end whitespace-nowrap">Expense Ratio</th>
</tr>
</thead>
<tbody>
{#each rawData as item,index}
<!-- row -->
<tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end sm:text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{abbreviateNumber(item?.totalAssets, true)}
</td>
<td class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.expenseRatio}%
</td>
</tr>
{/each}
</tbody>
</table>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Assets
</div>
<div class="stat-value text-lg font-semibold text-white">
${abbreviateNumber(totalAssets)}
</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Avg. Cost
</div>
<div class="stat-value text-lg font-semibold text-white">
{avgExpenseRatio?.toFixed(2)}%
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="w-full overflow-x-scroll">
<table
class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
>
<thead>
<tr class="border border-slate-800">
<th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-white font-semibold text-[1rem] whitespace-nowrap"
>Fund Name</th
>
<th
class="text-white font-semibold text-end sm:text-start text-[1rem]"
>Assets</th
>
<th
class="text-white font-semibold text-[1rem] text-end whitespace-nowrap"
>Expense Ratio</th
>
</tr>
</thead>
<tbody>
{#each rawData as item, index}
<!-- row -->
<tr
on:click={() => goto("/etf/" + item?.symbol)}
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
>
<td
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.symbol}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td>
<td
class="text-white font-medium text-end sm:text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{abbreviateNumber(item?.totalAssets, true)}
</td>
<td
class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.expenseRatio}%
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</section>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -1,135 +1,150 @@
<script lang='ts'>
import { screenWidth } from '$lib/store';
import { onMount } from 'svelte';
<script lang="ts">
import { screenWidth } from "$lib/store";
import { onMount } from "svelte";
export let data;
let rawData = data?.getDelistedStocks;
let marketCapList = rawData?.slice(0,50);
export let data;
let rawData = data?.getDelistedStocks;
let marketCapList = rawData?.slice(0, 50);
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && marketCapList?.length !== rawData?.length) {
const nextIndex = marketCapList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
marketCapList = [...marketCapList, ...filteredNewResults];
}
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && marketCapList?.length !== rawData?.length) {
const nextIndex = marketCapList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
marketCapList = [...marketCapList, ...filteredNewResults];
}
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let charNumber = 40;
}
$: {
if ($screenWidth < 640)
{
charNumber = 15;
onMount(async () => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
});
let charNumber = 40;
$: {
if ($screenWidth < 640) {
charNumber = 15;
} else {
charNumber = 40;
}
}
else {
charNumber = 40;
}
}
</script>
<section class="w-full overflow-hidden m-auto">
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#a474f6" 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 companies delisted from the exchange and no longer publicly traded.
</div>
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Market Cap</div>
<div class="stat-value text-lg font-semibold text-white">---</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Revenue</div>
<div class="stat-value text-lg font-semibold text-white">---</div>
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-[1rem]">IPO</th>
<th class="text-white font-semibold text-center text-[1rem]">Exchange</th>
<th class="text-white font-semibold text-[1rem] text-end">Delisted</th>
</tr>
</thead>
<tbody>
{#each marketCapList as item,index}
<!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.companyName?.length > charNumber ? item?.companyName?.slice(0,charNumber) + "..." : item?.companyName}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{new Date(item?.ipoDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.exchange}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{new Date(item?.delistedDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</section>
<section class="w-full overflow-hidden m-auto">
<div
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#FBCE3C"
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 companies delisted from the exchange and no longer publicly
traded.
</div>
<div
class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg"
>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Stocks
</div>
<div class="stat-value text-lg font-semibold text-white">
{rawData?.length}
</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Market Cap
</div>
<div class="stat-value text-lg font-semibold text-white">---</div>
</div>
<div class="stat">
<div class="stat-title text-sm sm:text-lg font-semibold text-white">
Total Revenue
</div>
<div class="stat-value text-lg font-semibold text-white">---</div>
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
<thead>
<tr class="border border-slate-800">
<th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-[1rem]">IPO</th>
<th class="text-white font-semibold text-center text-[1rem]"
>Exchange</th
>
<th class="text-white font-semibold text-[1rem] text-end"
>Delisted</th
>
</tr>
</thead>
<tbody>
{#each marketCapList as item, index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.symbol}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.companyName?.length > charNumber
? item?.companyName?.slice(0, charNumber) + "..."
: item?.companyName}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{new Date(item?.ipoDate).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]"
>
{item?.exchange}
</td>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{new Date(item?.delistedDate).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</section>

View File

@ -36,7 +36,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -36,7 +36,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -126,7 +126,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -150,7 +150,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -30,7 +30,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -36,7 +36,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -48,7 +48,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -164,7 +164,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -2219,7 +2219,7 @@ function sendMessage(message) {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

File diff suppressed because it is too large Load Diff

View File

@ -180,7 +180,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -3053,7 +3053,7 @@ const handleKeyDown = (event) => {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -518,7 +518,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -743,7 +743,7 @@ function handleTypeOfTrade(state:string)
<!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#09090B]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
<nav
class="sm:ml-4 border-b-[2px] overflow-x-scroll whitespace-nowrap"
class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap"
>
<ul
class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"

View File

@ -151,7 +151,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -54,7 +54,7 @@
<main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'} ">
<div class="m-auto">
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white">
<a

View File

@ -396,7 +396,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -481,7 +481,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -424,7 +424,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -388,7 +388,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -918,7 +918,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -439,7 +439,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -78,7 +78,7 @@
>
<main class="w-full lg:w-3/4">
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
class="sm:ml-4 pt-1 overflow-x-scroll md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white">
<a

View File

@ -279,7 +279,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -258,7 +258,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -577,7 +577,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -714,7 +714,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>
@ -1119,7 +1119,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>

View File

@ -377,7 +377,7 @@
viewBox="0 0 256 256"
>
<path
fill="#a474f6"
fill="#FBCE3C"
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>

View File

@ -411,7 +411,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
fill="#FBCE3C"
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
>