etf ui fix
This commit is contained in:
MuslemRahimi
parent
a8e1c7730a
commit
91697f1179
@ -227,88 +227,88 @@
|
||||
|
||||
{#if stockDividends?.length !== 0}
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#0F0F0F] shadow-md rounded-xl p-2 flex justify-center items-center mb-2">
|
||||
<!--Start Column Title-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-white font-medium text-md sm:text-lg">
|
||||
Dividend Yield
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-[1rem]">
|
||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Title-->
|
||||
|
||||
<!--Start Column Win Rate-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-white font-medium text-md sm:text-lg">
|
||||
Annual Dividend
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem]">
|
||||
${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Win Rate-->
|
||||
|
||||
<!--Start Column Performance-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-white font-medium text-md sm:text-lg">
|
||||
Ex-Dividend Date
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem]">
|
||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-white font-medium text-md sm:text-lg">
|
||||
Payout Frequency
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem]">
|
||||
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-white font-medium text-md sm:text-lg">
|
||||
Payout Ratio
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem]">
|
||||
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-white font-medium text-md sm:text-lg">
|
||||
Dividend Growth
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem]">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#202020] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
|
||||
<!--Start Column Title-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Dividend Yield
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{dividendYield !== '0.00' ? dividendYield : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Title-->
|
||||
|
||||
<!--Start Column Win Rate-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem] ">
|
||||
Annual Dividend
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
${annualDividend !== '0.00' ? annualDividend : '0'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column Win Rate-->
|
||||
|
||||
<!--Start Column Performance-->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Ex-Dividend Date
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Payout Frequency
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Payout Ratio
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{payoutRatio !== '0.00' ? payoutRatio : '0'}%
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
<!--Start Column-->
|
||||
<div class="flex flex-col sm:mt-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="text-gray-300 font-medium text-[1rem]">
|
||||
Dividend Growth
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-white text-[1rem] font-semibold">
|
||||
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<!--End Column-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-14 mb-8">
|
||||
|
||||
<h3 class="text-xl text-white font-medium ">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user