iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-10 17:10:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update ChannelGrid.svelte

Browse source
This commit is contained in:
freearhey 2025-02-10 03:51:21 +03:00
parent a7e39bd260
commit 76f00f8947
1 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/ChannelGrid.svelte
View file

@ -2,11 +2,19 @@
import ChannelItem from './ChannelItem.svelte'
export let channels = []
let limit = 100
$: channelsDisplay = channels.slice(0, limit)
function showMore() {
limit += 100
}
</script>
<div class="flex flex-col">
<div class="overflow-y-auto scrollbar-hide">
<div class="inline-block min-w-full align-middle overflow-hidden">
<div class="inline-block min-w-full align-middle">
<div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<div class="bg-gray-50 dark:bg-gray-700">
<div class="flex">
@ -27,9 +35,15 @@
</div>
</div>
<div class="bg-white dark:bg-gray-800">
{#each channels as channel (channel.id)}
{#each channelsDisplay as channel (channel.id)}
<ChannelItem bind:channel />
{/each}
{#if channelsDisplay.length < channels.length}
<button
class="flex items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
on:click={showMore}>Show More</button
>
{/if}
</div>
</div>
</div>