kopia lustrzana https://github.com/learn-awesome/learndb
100 wiersze
4.0 KiB
Svelte
100 wiersze
4.0 KiB
Svelte
<script>
|
|
import BookCard from "./BookCard.svelte"
|
|
import VideoCard from "./VideoCard.svelte"
|
|
import GenericCard from "./GenericCard.svelte"
|
|
export let items = []
|
|
import { formats } from "./formats.js"
|
|
|
|
function isMobile(){
|
|
return window.innerWidth < 680 ;
|
|
}
|
|
function getFormatDisplayName(formatName){
|
|
return isMobile() ? formatName.split(' ')[0] : formatName
|
|
}
|
|
</script>
|
|
|
|
|
|
<div class="mt-10">
|
|
<!-- desktop view -->
|
|
<div class="hidden md:block">
|
|
<sl-tab-group placement="start">
|
|
{#each formats.filter(f => items.filter(x => x.links.join(' ').includes(f.id + '|')).length > 0) as format, i}
|
|
|
|
<sl-tab slot="nav" panel={format.id} active={i == 0} class="sticky left-0">{getFormatDisplayName(format.name)} </sl-tab>
|
|
|
|
{#if format.id == 'book'}
|
|
<sl-tab-panel name={format.id} active={i == 0}>
|
|
<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
|
|
{#each items.filter(x => x.links.join(' ').includes(format.id + '|')) as item}
|
|
<BookCard {item}/>
|
|
{/each}
|
|
</div>
|
|
</sl-tab-panel>
|
|
|
|
{:else if format.id == 'video'}
|
|
<sl-tab-panel name={format.id} active={i == 0}>
|
|
<div class="mx-auto gap-5 flex flex-wrap">
|
|
{#each items.filter(x => x.links.join(' ').includes(format.id + '|')) as item}
|
|
<VideoCard {item}/>
|
|
{/each}
|
|
</div>
|
|
</sl-tab-panel>
|
|
|
|
{:else}
|
|
<sl-tab-panel name={format.id} active={i == 0}>
|
|
<div class="mx-auto gap-5 flex flex-wrap">
|
|
{#each items.filter(x => x.links.join(' ').includes(format.id + '|')) as item}
|
|
<GenericCard {item}/>
|
|
{/each}
|
|
</div>
|
|
</sl-tab-panel>
|
|
{/if}
|
|
{/each}
|
|
</sl-tab-group>
|
|
</div>
|
|
|
|
<!-- mobile view -->
|
|
<div class="md:hidden">
|
|
<sl-tab-group>
|
|
{#each formats.filter(f => items.filter(x => x.links.join(' ').includes(f.id + '|')).length > 0) as format, i}
|
|
|
|
<sl-tab slot="nav" panel={format.id} active={i == 0}>{getFormatDisplayName(format.name)} </sl-tab>
|
|
|
|
{#if format.id == 'book'}
|
|
<sl-tab-panel name={format.id} active={i == 0}>
|
|
<div class="grid gap-5 grid-cols-2 justify-items-center">
|
|
{#each items.filter(x => x.links.join(' ').includes(format.id + '|')) as item}
|
|
<BookCard {item}/>
|
|
{/each}
|
|
</div>
|
|
</sl-tab-panel>
|
|
|
|
{:else if format.id == 'video'}
|
|
<sl-tab-panel name={format.id} active={i == 0}>
|
|
<div class="mx-auto gap-5 flex flex-wrap">
|
|
{#each items.filter(x => x.links.join(' ').includes(format.id + '|')) as item}
|
|
<VideoCard {item}/>
|
|
{/each}
|
|
</div>
|
|
</sl-tab-panel>
|
|
|
|
{:else}
|
|
<sl-tab-panel name={format.id} active={i == 0}>
|
|
<div class="mx-auto gap-5 flex flex-wrap">
|
|
{#each items.filter(x => x.links.join(' ').includes(format.id + '|')) as item}
|
|
<GenericCard {item}/>
|
|
{/each}
|
|
</div>
|
|
</sl-tab-panel>
|
|
{/if}
|
|
{/each}
|
|
</sl-tab-group>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 mb-8">
|
|
{#each items as item}
|
|
<ItemCard {item}/>
|
|
{/each}
|
|
</div> --> |