ui fixes
This commit is contained in:
MuslemRahimi
parent
962dbb88c5
commit
eed1b9fced
@ -158,16 +158,31 @@ const output = await response.json();
|
||||
></label>
|
||||
|
||||
<div
|
||||
class="modal-box w-full bg-table border border-gray-600 rounded-none sm:rounded {$screenWidth <
|
||||
class="modal-box w-full bg-table sm:border sm:border-gray-600 rounded-none sm:rounded {$screenWidth <
|
||||
640
|
||||
? 'min-h-screen'
|
||||
: ''}"
|
||||
>
|
||||
<label
|
||||
for="userLogin"
|
||||
class="cursor-pointer absolute right-5 top-2 text-xl text-white"
|
||||
class="cursor-pointer absolute right-3 top-2 text-xl text-white"
|
||||
>
|
||||
✕
|
||||
<svg
|
||||
class="h-8 w-8"
|
||||
viewBox="0 -0.5 25 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
d="M6.96967 16.4697C6.67678 16.7626 6.67678 17.2374 6.96967 17.5303C7.26256 17.8232 7.73744 17.8232 8.03033 17.5303L6.96967 16.4697ZM13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697L13.0303 12.5303ZM11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303L11.9697 11.4697ZM18.0303 7.53033C18.3232 7.23744 18.3232 6.76256 18.0303 6.46967C17.7374 6.17678 17.2626 6.17678 16.9697 6.46967L18.0303 7.53033ZM13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303L13.0303 11.4697ZM16.9697 17.5303C17.2626 17.8232 17.7374 17.8232 18.0303 17.5303C18.3232 17.2374 18.3232 16.7626 18.0303 16.4697L16.9697 17.5303ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM8.03033 6.46967C7.73744 6.17678 7.26256 6.17678 6.96967 6.46967C6.67678 6.76256 6.67678 7.23744 6.96967 7.53033L8.03033 6.46967ZM8.03033 17.5303L13.0303 12.5303L11.9697 11.4697L6.96967 16.4697L8.03033 17.5303ZM13.0303 12.5303L18.0303 7.53033L16.9697 6.46967L11.9697 11.4697L13.0303 12.5303ZM11.9697 12.5303L16.9697 17.5303L18.0303 16.4697L13.0303 11.4697L11.9697 12.5303ZM13.0303 11.4697L8.03033 6.46967L6.96967 7.53033L11.9697 12.5303L13.0303 11.4697Z"
|
||||
fill="#fff"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
</label>
|
||||
|
||||
{#if displaySection === "login"}
|
||||
|
||||
@ -120,7 +120,8 @@
|
||||
<h2
|
||||
class="text-white text-[1rem] sm:text-xl font-semibold mb-2 mt-4"
|
||||
>
|
||||
The President is in {(data?.getData?.city === "Washington"
|
||||
The President is in {(data?.getData?.city === "Washington" ||
|
||||
data?.getData?.city === null
|
||||
? "the White House"
|
||||
: data?.getData?.city) ?? "n/a"}
|
||||
</h2>
|
||||
@ -132,379 +133,299 @@
|
||||
Map data © OpenStreetMap
|
||||
</span>
|
||||
|
||||
<nav
|
||||
class=" border-b-[2px] whitespace-nowrap mt-10 sm:mt-6 overflow-hidden"
|
||||
<h3
|
||||
class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-[1rem] text-white"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => (activeIdx = i)}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === i
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
{item.title}
|
||||
</button>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{#if activeIdx === 0}
|
||||
<h3
|
||||
class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
|
||||
>
|
||||
Official Presidential Schedule
|
||||
</h3>
|
||||
<div
|
||||
class="max-h-[600px] bg-[#1F1F1F] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
{#each Object.entries(groupedByDate) as [date, items], indexA}
|
||||
<div class="my-4">
|
||||
<div
|
||||
class="border-b border-gray-200 pb-2 w-full flex flex-row items-center justify-between"
|
||||
Official Presidential Schedule
|
||||
</h3>
|
||||
<div
|
||||
class="max-h-[600px] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
{#each Object.entries(groupedByDate) as [date, items], indexA}
|
||||
<div class="my-4">
|
||||
<div
|
||||
class="border-b border-gray-200 pb-2 w-full flex flex-row items-center justify-between"
|
||||
>
|
||||
<span class="text-[1rem] font-semibold text-white">
|
||||
{date}</span
|
||||
>
|
||||
<span
|
||||
class="text-[1rem] sm:text-lg font-semibold text-white"
|
||||
>
|
||||
{date}</span
|
||||
>
|
||||
{#if items?.at(0)?.changesPercentage}
|
||||
<div class="ml-auto text-sm">
|
||||
<span class="inline-block">S&P500</span>
|
||||
<span
|
||||
class="{items?.at(0)?.changesPercentage > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
: 'text-[#FF2F1F]'} "
|
||||
>{items.length > 0
|
||||
? items?.at(0)?.changesPercentage
|
||||
: "n/a"}%</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Display date -->
|
||||
<br />
|
||||
{#each items as item, indexB}
|
||||
<div class="flex flex-col items-start space-y-1 mb-6">
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<div class="relative">
|
||||
<svg
|
||||
fill={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
class="w-5 h-5 relative z-10"
|
||||
viewBox="-51.2 -51.2 614.40 614.40"
|
||||
id="_78_Circle-Full"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
stroke-width="0.00512"
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke="#CCCCCC"
|
||||
stroke-width="24.576"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
id="Path_111"
|
||||
data-name="Path 111"
|
||||
d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{#if indexA === 0 && indexB === 0}
|
||||
<span
|
||||
class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
|
||||
></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<span class="text-sm sm:text-[1rem] text-gray-400">
|
||||
{item.time_formatted}
|
||||
{item.location !== null
|
||||
? `- ${item?.location}`
|
||||
: ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-sm sm:text-[1rem] ml-7">
|
||||
{item.details}
|
||||
</span>
|
||||
{#if items?.at(0)?.changesPercentage}
|
||||
<div class="ml-auto text-sm">
|
||||
<span class="inline-block">S&P500</span>
|
||||
<span
|
||||
class="{items?.at(0)?.changesPercentage > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
: 'text-[#FF2F1F]'} "
|
||||
>{items.length > 0
|
||||
? items?.at(0)?.changesPercentage
|
||||
: "n/a"}%</span
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<h3
|
||||
class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
|
||||
>
|
||||
AI Executive Orders Analysis
|
||||
</h3>
|
||||
<div
|
||||
class="max-h-[600px] bg-[#1F1F1F] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
{#each Object.entries(groupedOrders) as [date, items], indexA}
|
||||
<div class="my-4">
|
||||
<div
|
||||
class="border-b border-gray-300 pb-2 flex flex-row items-center"
|
||||
>
|
||||
<span class="text-lg font-semibold text-white"
|
||||
>{date}</span
|
||||
>
|
||||
{#if latestInfoDate(date)}
|
||||
<label
|
||||
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block"
|
||||
>New</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<br />
|
||||
|
||||
{#each items as item, indexB}
|
||||
<div
|
||||
class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4"
|
||||
>
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<div class="relative">
|
||||
<svg
|
||||
fill={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
class="w-5 h-5 relative z-10"
|
||||
viewBox="-51.2 -51.2 614.40 614.40"
|
||||
id="_78_Circle-Full"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
stroke-width="0.00512"
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke="#CCCCCC"
|
||||
stroke-width="24.576"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
id="Path_111"
|
||||
data-name="Path 111"
|
||||
d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{#if indexA === 0 && indexB === 0}
|
||||
<span
|
||||
class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
|
||||
></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-sm flex flex-col items-start w-full mb-1"
|
||||
>
|
||||
<span
|
||||
class="text-white text-lg font-semibold inline-block"
|
||||
>{item.title}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ml-7 {item?.sentiment === 'Bullish'
|
||||
? 'bg-emerald-500 text-white'
|
||||
: item?.sentiment === 'Bearish'
|
||||
? 'bg-red-600 text-white'
|
||||
: 'bg-white text-black'} py-1 rounded text-xs sm:text-sm w-fit px-2 font-medium"
|
||||
>
|
||||
{item?.sentiment}
|
||||
</div>
|
||||
|
||||
<span class="text-[1rem] ml-7 pt-2">
|
||||
{#if item.description.length > 150}
|
||||
{expandedDescriptions[item.title]
|
||||
? item.description
|
||||
: truncateText(item.description)}
|
||||
<button
|
||||
on:click={() =>
|
||||
(expandedDescriptions[item.title] =
|
||||
!expandedDescriptions[item.title])}
|
||||
class="text-blue-400 hover:text-blue-300 ml-1 font-medium"
|
||||
>
|
||||
{expandedDescriptions[item.title]
|
||||
? "Read less"
|
||||
: "Read more"}
|
||||
</button>
|
||||
{:else}
|
||||
{item.description}
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<a
|
||||
href={item?.link}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="ml-7 inline-block text-sm sm:text-[1rem] text-white hover:underline"
|
||||
>
|
||||
Source
|
||||
<!-- Display date -->
|
||||
<br />
|
||||
{#each items as item, indexB}
|
||||
<div class="flex flex-col items-start space-y-1 mb-6">
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<div class="relative">
|
||||
<svg
|
||||
class="w-4 h-4 sm:w-5 sm:h-5 -mt-0.5 inline-block"
|
||||
fill="#fff"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
fill={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
class="w-5 h-5 relative z-10"
|
||||
viewBox="-51.2 -51.2 614.40 614.40"
|
||||
id="_78_Circle-Full"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
stroke={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
stroke-width="0.00512"
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<rect
|
||||
id="Icons"
|
||||
x="-896"
|
||||
y="0"
|
||||
width="1280"
|
||||
height="800"
|
||||
style="fill:none;"
|
||||
></rect>
|
||||
<g id="Icons1" serif:id="Icons">
|
||||
<g id="Strike"> </g> <g id="H1"> </g>
|
||||
<g id="H2"> </g> <g id="H3"> </g>
|
||||
<g id="list-ul"> </g>
|
||||
<g id="hamburger-1"> </g>
|
||||
<g id="hamburger-2"> </g>
|
||||
<g id="list-ol"> </g>
|
||||
<g id="list-task"> </g> <g id="trash"> </g>
|
||||
<g id="vertical-menu"> </g>
|
||||
<g id="horizontal-menu"> </g>
|
||||
<g id="sidebar-2"> </g> <g id="Pen"> </g>
|
||||
<g id="Pen1" serif:id="Pen"> </g>
|
||||
<g id="clock"> </g>
|
||||
<g id="external-link">
|
||||
<path
|
||||
d="M36.026,20.058l-21.092,0c-1.65,0 -2.989,1.339 -2.989,2.989l0,25.964c0,1.65 1.339,2.989 2.989,2.989l26.024,0c1.65,0 2.989,-1.339 2.989,-2.989l0,-20.953l3.999,0l0,21.948c0,3.308 -2.686,5.994 -5.995,5.995l-28.01,0c-3.309,0 -5.995,-2.687 -5.995,-5.995l0,-27.954c0,-3.309 2.686,-5.995 5.995,-5.995l22.085,0l0,4.001Z"
|
||||
></path>
|
||||
<path
|
||||
d="M55.925,25.32l-4.005,0l0,-10.481l-27.894,27.893l-2.832,-2.832l27.895,-27.895l-10.484,0l0,-4.005l17.318,0l0.002,0.001l0,17.319Z"
|
||||
></path>
|
||||
</g> <g id="hr"> </g> <g id="info"> </g>
|
||||
<g id="warning"> </g>
|
||||
<g id="plus-circle"> </g>
|
||||
<g id="minus-circle"> </g> <g id="vue"> </g>
|
||||
<g id="cog"> </g> <g id="logo"> </g>
|
||||
<g id="radio-check"> </g>
|
||||
<g id="eye-slash"> </g> <g id="eye"> </g>
|
||||
<g id="toggle-off"> </g>
|
||||
<g id="shredder"> </g>
|
||||
<g
|
||||
id="spinner--loading--dots-"
|
||||
serif:id="spinner [loading, dots]"
|
||||
>
|
||||
</g> <g id="react"> </g>
|
||||
<g id="check-selected"> </g>
|
||||
<g id="turn-off"> </g>
|
||||
<g id="code-block"> </g>
|
||||
<g id="user"> </g> <g id="coffee-bean"> </g>
|
||||
<g id="coffee-beans">
|
||||
<g id="coffee-bean1" serif:id="coffee-bean">
|
||||
</g>
|
||||
</g> <g id="coffee-bean-filled"> </g>
|
||||
<g id="coffee-beans-filled">
|
||||
<g id="coffee-bean2" serif:id="coffee-bean">
|
||||
</g>
|
||||
</g> <g id="clipboard"> </g>
|
||||
<g id="clipboard-paste"> </g>
|
||||
<g id="clipboard-copy"> </g>
|
||||
<g id="Layer1"> </g>
|
||||
</g>
|
||||
</g></svg
|
||||
>
|
||||
</a>
|
||||
stroke="#CCCCCC"
|
||||
stroke-width="24.576"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
id="Path_111"
|
||||
data-name="Path 111"
|
||||
d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{#if indexA === 0 && indexB === 0}
|
||||
<span
|
||||
class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
|
||||
></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<span class="text-sm text-gray-400">
|
||||
{item.time_formatted}
|
||||
{item.location !== null
|
||||
? `- ${item?.location}`
|
||||
: ""}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<span class="text-sm ml-7">
|
||||
{item.details}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-4 flex-shrink-0 lg:float-right lg:w-[336px]">
|
||||
<div
|
||||
class="order-4 flex-shrink-0 lg:float-right lg:w-[336px] no-scrollbar overflow-y-auto"
|
||||
>
|
||||
<h3 class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6">
|
||||
Executive Actions
|
||||
</h3>
|
||||
<div
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
|
||||
class="max-h-[600px] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
|
||||
>
|
||||
<a
|
||||
href={`/newsletter`}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Market Newsletter
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get a daily email with the top market news in bullet point
|
||||
format.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
{#each Object.entries(groupedOrders) as [date, items], indexA}
|
||||
<div class="my-4">
|
||||
<div
|
||||
class="border-b border-gray-300 pb-2 flex flex-row items-center"
|
||||
>
|
||||
<span class="text-lg font-semibold text-white"
|
||||
>{date}</span
|
||||
>
|
||||
{#if latestInfoDate(date)}
|
||||
<label
|
||||
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block"
|
||||
>New</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
|
||||
>
|
||||
<a
|
||||
href={"/stock-screener"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Stock Screener
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Build your Stock Screener to find profitable stocks.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
|
||||
>
|
||||
<a
|
||||
href={"/watchlist/stocks"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Watchlist
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Keep track of your favorite stocks in real-time.
|
||||
</span>
|
||||
</a>
|
||||
{#each items as item, indexB}
|
||||
<div
|
||||
class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4"
|
||||
>
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<div class="relative">
|
||||
<svg
|
||||
fill={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
class="w-5 h-5 relative z-10"
|
||||
viewBox="-51.2 -51.2 614.40 614.40"
|
||||
id="_78_Circle-Full"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke={indexA === 0 && indexB === 0
|
||||
? "#2E86DE"
|
||||
: "#808080"}
|
||||
stroke-width="0.00512"
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke="#CCCCCC"
|
||||
stroke-width="24.576"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
id="Path_111"
|
||||
data-name="Path 111"
|
||||
d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{#if indexA === 0 && indexB === 0}
|
||||
<span
|
||||
class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
|
||||
></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-sm flex flex-col items-start w-full mb-1"
|
||||
>
|
||||
<span
|
||||
class="text-white text-lg font-semibold inline-block"
|
||||
>{item.title}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ml-7 {item?.sentiment === 'Bullish'
|
||||
? 'bg-emerald-500 text-white'
|
||||
: item?.sentiment === 'Bearish'
|
||||
? 'bg-red-600 text-white'
|
||||
: 'bg-white text-black'} py-1 rounded text-xs sm:text-sm w-fit px-2 font-medium"
|
||||
>
|
||||
{item?.sentiment}
|
||||
</div>
|
||||
|
||||
<span class="text-[1rem] ml-7 pt-2">
|
||||
{#if item.description.length > 150}
|
||||
{expandedDescriptions[item.title]
|
||||
? item.description
|
||||
: truncateText(item.description)}
|
||||
<button
|
||||
on:click={() =>
|
||||
(expandedDescriptions[item.title] =
|
||||
!expandedDescriptions[item.title])}
|
||||
class="text-blue-400 hover:text-blue-300 ml-1 font-medium"
|
||||
>
|
||||
{expandedDescriptions[item.title]
|
||||
? "Read less"
|
||||
: "Read more"}
|
||||
</button>
|
||||
{:else}
|
||||
{item.description}
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<a
|
||||
href={item?.link}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="ml-7 inline-block text-sm sm:text-[1rem] text-white hover:underline"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
class="w-4 h-4 sm:w-5 sm:h-5 -mt-0.5 inline-block"
|
||||
fill="#fff"
|
||||
viewBox="0 0 64 64"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<rect
|
||||
id="Icons"
|
||||
x="-896"
|
||||
y="0"
|
||||
width="1280"
|
||||
height="800"
|
||||
style="fill:none;"
|
||||
></rect>
|
||||
<g id="Icons1" serif:id="Icons">
|
||||
<g id="Strike"> </g> <g id="H1"> </g>
|
||||
<g id="H2"> </g> <g id="H3"> </g>
|
||||
<g id="list-ul"> </g>
|
||||
<g id="hamburger-1"> </g>
|
||||
<g id="hamburger-2"> </g>
|
||||
<g id="list-ol"> </g>
|
||||
<g id="list-task"> </g> <g id="trash"> </g>
|
||||
<g id="vertical-menu"> </g>
|
||||
<g id="horizontal-menu"> </g>
|
||||
<g id="sidebar-2"> </g> <g id="Pen"> </g>
|
||||
<g id="Pen1" serif:id="Pen"> </g>
|
||||
<g id="clock"> </g>
|
||||
<g id="external-link">
|
||||
<path
|
||||
d="M36.026,20.058l-21.092,0c-1.65,0 -2.989,1.339 -2.989,2.989l0,25.964c0,1.65 1.339,2.989 2.989,2.989l26.024,0c1.65,0 2.989,-1.339 2.989,-2.989l0,-20.953l3.999,0l0,21.948c0,3.308 -2.686,5.994 -5.995,5.995l-28.01,0c-3.309,0 -5.995,-2.687 -5.995,-5.995l0,-27.954c0,-3.309 2.686,-5.995 5.995,-5.995l22.085,0l0,4.001Z"
|
||||
></path>
|
||||
<path
|
||||
d="M55.925,25.32l-4.005,0l0,-10.481l-27.894,27.893l-2.832,-2.832l27.895,-27.895l-10.484,0l0,-4.005l17.318,0l0.002,0.001l0,17.319Z"
|
||||
></path>
|
||||
</g> <g id="hr"> </g> <g id="info"> </g>
|
||||
<g id="warning"> </g>
|
||||
<g id="plus-circle"> </g>
|
||||
<g id="minus-circle"> </g> <g id="vue"> </g>
|
||||
<g id="cog"> </g> <g id="logo"> </g>
|
||||
<g id="radio-check"> </g>
|
||||
<g id="eye-slash"> </g> <g id="eye"> </g>
|
||||
<g id="toggle-off"> </g>
|
||||
<g id="shredder"> </g>
|
||||
<g
|
||||
id="spinner--loading--dots-"
|
||||
serif:id="spinner [loading, dots]"
|
||||
>
|
||||
</g> <g id="react"> </g>
|
||||
<g id="check-selected"> </g>
|
||||
<g id="turn-off"> </g>
|
||||
<g id="code-block"> </g>
|
||||
<g id="user"> </g> <g id="coffee-bean"> </g>
|
||||
<g id="coffee-beans">
|
||||
<g id="coffee-bean1" serif:id="coffee-bean">
|
||||
</g>
|
||||
</g> <g id="coffee-bean-filled"> </g>
|
||||
<g id="coffee-beans-filled">
|
||||
<g id="coffee-bean2" serif:id="coffee-bean">
|
||||
</g>
|
||||
</g> <g id="clipboard"> </g>
|
||||
<g id="clipboard-paste"> </g>
|
||||
<g id="clipboard-copy"> </g>
|
||||
<g id="Layer1"> </g>
|
||||
</g>
|
||||
</g></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user