update market news page
This commit is contained in:
MuslemRahimi
parent
b1a6015df2
commit
d0e0ee7513
@ -111,70 +111,76 @@
|
|||||||
<div class="relative flex justify-center items-center overflow-hidden">
|
<div class="relative flex justify-center items-center overflow-hidden">
|
||||||
<main>
|
<main>
|
||||||
<div class="w-full m-auto">
|
<div class="w-full m-auto">
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
<div class="grid grid-cols-1 gap-y-3">
|
||||||
{#if news.length !== 0}
|
{#if news.length !== 0}
|
||||||
{#each news as item}
|
{#each news as item}
|
||||||
<div
|
<div class="w-full flex flex-col bg-[#09090B] m-auto">
|
||||||
class="flex flex-col w-full mt-5 bg-[#141417] shadow-lg h-auto sm:h-[450px] xl:h-[430px] pb-10 sm:pb-5 rounded-md m-auto"
|
{#if (videoId = checkIfYoutubeVideo(item?.url))}
|
||||||
|
<div class="w-full mb-4">
|
||||||
|
<h3 class="text-sm text-white/80 mb-2">
|
||||||
|
{formatDate(item?.publishedDate)} ago · {item?.site}
|
||||||
|
</h3>
|
||||||
|
<a
|
||||||
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="text-lg sm:text-xl font-bold text-white"
|
||||||
>
|
>
|
||||||
{#if (videoId = checkIfYoutubeVideo(item.url))}
|
{item?.title}
|
||||||
|
<p class="text-white text-sm font-normal">
|
||||||
|
{item?.text}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="w-full aspect-video">
|
||||||
<iframe
|
<iframe
|
||||||
class="w-full h-60 rounded-none sm:rounded-lg"
|
class="w-full h-full"
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
src={`https://www.youtube.com/embed/${videoId}`}
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
allowfullscreen
|
allowfullscreen
|
||||||
></iframe>
|
></iframe>
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<a href={item.url} target="_blank">
|
<div class="w-full flex flex-col sm:flex-row">
|
||||||
<div
|
<a
|
||||||
class="h-48 sm:h-60 m-auto border border-gray-600 rounded-none sm:rounded-lg"
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3"
|
||||||
>
|
>
|
||||||
|
<div class="flex-shrink-0 m-auto">
|
||||||
<img
|
<img
|
||||||
src={item?.image}
|
src={item?.image}
|
||||||
class="w-full object-cover h-48 sm:h-60 rounded-none sm:rounded-t-lg"
|
class="h-auto w-full"
|
||||||
alt="news image"
|
alt="news image"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
<div class="w-full">
|
||||||
|
<h3 class="text-sm text-white/80 truncate mb-2 mt-3">
|
||||||
<div class="pl-3 pr-3">
|
{formatDate(item?.publishedDate)} ago · {item?.site}
|
||||||
<label
|
</h3>
|
||||||
class="mt-3 mb-3 cursor-pointer text-xs text-gray-200 flex flex-row items-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="rounded-full w-6 h-6 relative bg-gray-800 mr-1.5 mb-0.5"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="rounded-full w-4 h-4 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{item?.symbol} · {formatDate(item?.publishedDate)} ago
|
|
||||||
<span class="ml-auto text-gray-300 italic text-xs mr-2">
|
|
||||||
Source: {item?.site}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href={item.url}
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="text-lg font-bold text-white"
|
class="text-lg sm:text-xl font-bold text-white"
|
||||||
>
|
>
|
||||||
{item?.title?.length > 120
|
{item?.title}
|
||||||
? item?.title?.slice(0, 120) + "..."
|
<p class="text-white text-sm mt-2 font-normal">
|
||||||
: item?.title}
|
{item?.text?.length > 200
|
||||||
</a>
|
? item?.text?.slice(0, 200) + "..."
|
||||||
<p class="text-white text-sm mt-2">
|
|
||||||
{item?.text?.length > 100
|
|
||||||
? item?.text?.slice(0, 100) + "..."
|
|
||||||
: item?.text}
|
: item?.text}
|
||||||
</p>
|
</p>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-800 w-full m-auto mt-5 mb-5" />
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -111,60 +111,76 @@
|
|||||||
<div class="relative flex justify-center items-center overflow-hidden">
|
<div class="relative flex justify-center items-center overflow-hidden">
|
||||||
<main>
|
<main>
|
||||||
<div class="w-full m-auto">
|
<div class="w-full m-auto">
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
<div class="grid grid-cols-1 gap-y-3">
|
||||||
{#if news?.length !== 0}
|
{#if news?.length !== 0}
|
||||||
{#each news as item}
|
{#each news as item}
|
||||||
<div
|
<div class="w-full flex flex-col bg-[#09090B] m-auto">
|
||||||
class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-md m-auto"
|
{#if (videoId = checkIfYoutubeVideo(item?.url))}
|
||||||
|
<div class="w-full mb-4">
|
||||||
|
<h3 class="text-sm text-white/80 mb-2">
|
||||||
|
{formatDate(item?.datetime * 1000)} ago · {item?.source}
|
||||||
|
</h3>
|
||||||
|
<a
|
||||||
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="text-lg sm:text-xl font-bold text-white"
|
||||||
>
|
>
|
||||||
{#if (videoId = checkIfYoutubeVideo(item.url))}
|
{item?.headline}
|
||||||
|
<p class="text-white text-sm font-normal">
|
||||||
|
{item?.summary}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="w-full aspect-video">
|
||||||
<iframe
|
<iframe
|
||||||
class="w-full h-60 rounded-none sm:rounded-lg"
|
class="w-full h-full"
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
src={`https://www.youtube.com/embed/${videoId}`}
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
allowfullscreen
|
allowfullscreen
|
||||||
></iframe>
|
></iframe>
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<a href={item?.url} target="_blank">
|
<div class="w-full flex flex-col sm:flex-row">
|
||||||
<div
|
<a
|
||||||
class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg"
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3"
|
||||||
>
|
>
|
||||||
|
<div class="flex-shrink-0 m-auto">
|
||||||
<img
|
<img
|
||||||
src={item?.image}
|
src={item?.image}
|
||||||
class="w-full object-cover h-48 sm:h-60 rounded-none sm:rounded-t-lg"
|
class="h-auto w-full"
|
||||||
alt="news image"
|
alt="news image"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
<div class="w-full">
|
||||||
|
<h3 class="text-sm text-white/80 truncate mb-2 mt-3">
|
||||||
<div class="pl-3 pr-3">
|
{formatDate(item?.datetime * 1000)} ago · {item?.source}
|
||||||
<label
|
</h3>
|
||||||
class="mt-3 mb-3 cursor-pointer text-xs text-gray-200 flex flex-row items-center"
|
|
||||||
>
|
|
||||||
Source: {item?.source} · {formatDate(
|
|
||||||
item?.datetime * 1000,
|
|
||||||
)} ago
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href={item?.url}
|
href={item?.url}
|
||||||
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="text-lg font-bold text-white"
|
class="text-lg sm:text-xl font-bold text-white"
|
||||||
>
|
>
|
||||||
{item?.headline?.length > 120
|
{item?.headline}
|
||||||
? item?.headline?.slice(0, 120) + "..."
|
<p class="text-white text-sm mt-2 font-normal">
|
||||||
: item?.headline}
|
{item?.summary?.length > 200
|
||||||
</a>
|
? item?.summary?.slice(0, 200) + "..."
|
||||||
<p class="text-white text-sm mt-2">
|
|
||||||
{item?.summary?.length > 100
|
|
||||||
? item?.summary?.slice(0, 100) + "..."
|
|
||||||
: item?.summary}
|
: item?.summary}
|
||||||
</p>
|
</p>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-800 w-full m-auto mt-5 mb-5" />
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user