129 lines
4.0 KiB
Svelte
129 lines
4.0 KiB
Svelte
<script lang='ts'>
|
|
|
|
import {stockTicker} from '$lib/store';
|
|
import amdLogo from '$lib/images/stocks/logo/AMD.png'
|
|
import tslaLogo from '$lib/images/stocks/logo/TSLA.png'
|
|
import aaplLogo from '$lib/images/stocks/logo/AAPL.png'
|
|
import nvdaLogo from '$lib/images/stocks/logo/NVDA.png'
|
|
|
|
export let trendingList:List;
|
|
export let color;
|
|
|
|
|
|
|
|
|
|
async function stockSelector(state)
|
|
{
|
|
stockTicker.update(value => state);
|
|
}
|
|
|
|
|
|
|
|
|
|
$: {
|
|
if(trendingList)
|
|
{
|
|
for (const item of trendingList ) {
|
|
if(item?.symbol === 'AMD')
|
|
{
|
|
item.image = amdLogo
|
|
}
|
|
else if (item?.symbol === 'TSLA')
|
|
{
|
|
item.image = tslaLogo
|
|
}
|
|
else if (item?.symbol === 'AAPL')
|
|
{
|
|
item.image = aaplLogo
|
|
}
|
|
else if (item?.symbol === 'NVDA')
|
|
{
|
|
item.image = nvdaLogo
|
|
}
|
|
}
|
|
trendingList = [...trendingList]
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<section class="relative flex justify-between items-center bg-[{color}] rounded-lg">
|
|
<div class="max-w-3xl m-auto">
|
|
<div class="flex flex-row justify-start items-cneter overflow-hidden w-full pb-2">
|
|
{#if trendingList?.length !== 0}
|
|
{#each trendingList as item}
|
|
<a href={"/stocks/"+item?.symbol} on:click={() => stockSelector(item?.symbol)} class="h-18 w-[90px] sm:w-28 mt-5 rounded-xl flex flex-col justify-center items-center">
|
|
<img class="relative mb-2 rounded w-5 h-5 " src={item?.image}>
|
|
<p class="text-center text-white font-medium text-sm whitespace-normal mb-0.5">{item?.symbol}</p>
|
|
<div class ="flex justify-center items-center m-auto font-medium text-xs sm:text-sm relative bottom-0">
|
|
{#if item?.changesPercentage >=0}
|
|
<svg class="w-2.5 h-2.5 inline-block mt-0.5 mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path fill="#37C97D" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
|
<span class="items-center justify-start text-[#37C97D]">+{item?.changesPercentage?.toFixed(2)}%</span>
|
|
{:else}
|
|
<svg class="w-2.5 h-2.5 inline-block mt-0.5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path fill="#FF2F1F" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"/></g></svg>
|
|
<span class="items-center justify-start text-[#FF2F1F]">
|
|
{item?.changesPercentage?.toFixed(2)}%
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
{:else}
|
|
<div class="m-auto w-full mt-5">
|
|
<div role="status" class="animate-pulse">
|
|
<div class="w-full flex flex-row items-center ">
|
|
<div class="flex flex-col items-center mr-10 sm:mr-14">
|
|
<div class="bg-slate-400 rounded-full w-12 h-12"></div>
|
|
<div class="bg-slate-400 rounded-lg w-12 h-4 mt-3"></div>
|
|
</div>
|
|
<div class="flex flex-col items-center mr-10 sm:mr-14">
|
|
<div class="bg-slate-400 rounded-full w-12 h-12"></div>
|
|
<div class="bg-slate-400 rounded-lg w-12 h-4 mt-3"></div>
|
|
</div>
|
|
<div class="flex flex-col items-center mr-10 sm:mr-14">
|
|
<div class="bg-slate-400 rounded-full w-12 h-12"></div>
|
|
<div class="bg-slate-400 rounded-lg w-12 h-4 mt-3"></div>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<div class="bg-slate-400 rounded-full w-12 h-12"></div>
|
|
<div class="bg-slate-400 rounded-lg w-12 h-4 mt-3"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
a:hover img {
|
|
animation-name: shake;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
|
|
@keyframes shake {
|
|
0% { transform: rotate(0deg); }
|
|
25% { transform: rotate(10deg); }
|
|
50% { transform: rotate(0deg); }
|
|
75% { transform: rotate(-10deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
|
|
:root {
|
|
--primary-color: mediumslateblue;
|
|
}
|
|
|
|
|
|
|
|
</style> |