update news component
This commit is contained in:
MuslemRahimi
parent
80e5c0bc4b
commit
e7692f801b
@ -140,75 +140,40 @@
|
||||
|
||||
{#if rawData?.length > 0}
|
||||
{#if isLoaded}
|
||||
<div class="grid grid-cols-1 gap-2 pb-5 pt-5">
|
||||
{#each filteredNewsList as item, index}
|
||||
<div class="w-full flex flex-col bg-[#09090B] rounded-md m-auto">
|
||||
{#if checkIfYoutubeVideo(item.url)}
|
||||
{#if showVideo[index]}
|
||||
<!-- Show the YouTube iframe when the user clicks play -->
|
||||
<div class="w-full aspect-video mb-4">
|
||||
<iframe
|
||||
class="w-full h-full rounded-md border border-gray-800"
|
||||
src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.url)}`}
|
||||
frameborder="0"
|
||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Show the image placeholder with a play button -->
|
||||
<div class="w-full aspect-video">
|
||||
<div class="mb-3 sm:order-3 lg:pr-2">
|
||||
<div
|
||||
class="group relative block cursor-pointer bg-black bg-cover bg-[center_50%] object-contain after:block after:pb-[56.25%] after:content-[''] rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-brand_light focus:ring-offset-2"
|
||||
style="background-image: url({item?.image});"
|
||||
tabindex="0"
|
||||
on:click={() => handlePlayClick(index)}
|
||||
>
|
||||
{#if filteredNewsList?.length > 0}
|
||||
<div class="grid grid-cols-1 gap-2 pb-5 pt-5">
|
||||
{#each filteredNewsList as item, index}
|
||||
<div class="w-full flex flex-col bg-[#09090B] rounded-md m-auto">
|
||||
{#if checkIfYoutubeVideo(item.url)}
|
||||
{#if showVideo[index]}
|
||||
<!-- Show the YouTube iframe when the user clicks play -->
|
||||
<div class="w-full aspect-video mb-4">
|
||||
<iframe
|
||||
class="w-full h-full rounded-md border border-gray-800"
|
||||
src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.url)}`}
|
||||
frameborder="0"
|
||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Show the image placeholder with a play button -->
|
||||
<div class="w-full aspect-video">
|
||||
<div class="mb-3 sm:order-3 lg:pr-2">
|
||||
<div
|
||||
class="absolute left-[50%] top-[50%] z-10 h-[46px] w-[70px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-[#212121] opacity-80 transition-all before:absolute before:left-[50%] before:top-[50%] before:-translate-x-1/2 before:-translate-y-1/2 before:border-y-[11px] before:border-l-[19px] before:border-r-0 before:border-transparent before:border-l-white before:content-[''] group-hover:bg-[#ff0000] group-hover:opacity-100"
|
||||
></div>
|
||||
class="group relative block cursor-pointer bg-black bg-cover bg-[center_50%] object-contain after:block after:pb-[56.25%] after:content-[''] rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-brand_light focus:ring-offset-2"
|
||||
style="background-image: url({item?.image});"
|
||||
tabindex="0"
|
||||
on:click={() => handlePlayClick(index)}
|
||||
>
|
||||
<div
|
||||
class="absolute left-[50%] top-[50%] z-10 h-[46px] w-[70px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-[#212121] opacity-80 transition-all before:absolute before:left-[50%] before:top-[50%] before:-translate-x-1/2 before:-translate-y-1/2 before:border-y-[11px] before:border-l-[19px] before:border-r-0 before:border-transparent before:border-l-white before:content-[''] group-hover:bg-[#ff0000] group-hover:opacity-100"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mt-3 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
href={item?.url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-lg sm:text-xl font-bold text-white"
|
||||
>
|
||||
{item?.title}
|
||||
<p class="text-white text-sm mt-2 font-normal">
|
||||
{item?.text?.length > 200
|
||||
? item?.text?.slice(0, 200) + "..."
|
||||
: item?.text}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Default news article display -->
|
||||
<div class="w-full flex flex-col sm:flex-row">
|
||||
<a
|
||||
href={item?.url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
|
||||
>
|
||||
<div class="flex-shrink-0 m-auto">
|
||||
<img
|
||||
src={item?.image}
|
||||
class="h-auto w-full rounded-md"
|
||||
alt="news image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<div class="mt-3 sm:mt-0 w-full">
|
||||
{/if}
|
||||
<div class="mt-3 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
@ -226,12 +191,76 @@
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Default news article display -->
|
||||
<div class="w-full flex flex-col sm:flex-row">
|
||||
<a
|
||||
href={item?.url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
|
||||
>
|
||||
<div class="flex-shrink-0 m-auto">
|
||||
<img
|
||||
src={item?.image}
|
||||
class="h-auto w-full rounded-md"
|
||||
alt="news image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<div class="mt-3 sm:mt-0 w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
{formatDate(item?.publishedDate)} · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
href={item?.url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-lg sm:text-xl font-bold text-white"
|
||||
>
|
||||
{item?.title}
|
||||
<p class="text-white text-sm mt-2 font-normal">
|
||||
{item?.text?.length > 200
|
||||
? item?.text?.slice(0, 200) + "..."
|
||||
: item?.text}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-5 mt-4 px-3 xs:px-4 sm:px-0">
|
||||
<div class="border-l-4 border-white p-4 text-white">
|
||||
<div class="flex flex-row items-center">
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
></path></svg
|
||||
>
|
||||
<div class="ml-3 w-full sm:ml-4">
|
||||
<div class="flex w-full flex-row justify-between">
|
||||
<div>
|
||||
No {displaySection === "videos" ? "videos" : "articles"} found
|
||||
for this stock.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if newsList?.length !== rawData?.length}
|
||||
<label
|
||||
on:click={loadMoreData}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user