2022-05-08 12:02:37 +00:00
|
|
|
<script>
|
|
|
|
import ItemCard from "./ItemCard.svelte"
|
2022-05-11 14:08:38 +00:00
|
|
|
import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
|
2022-05-23 17:30:22 +00:00
|
|
|
import { formats } from "./formats.js"
|
|
|
|
import BookCard from "./BookCard.svelte"
|
|
|
|
import VideoCard from "./VideoCard.svelte"
|
|
|
|
import GenericCard from "./GenericCard.svelte"
|
2022-05-08 12:02:37 +00:00
|
|
|
|
2022-05-19 15:51:06 +00:00
|
|
|
export let topicname;
|
2022-05-23 17:50:08 +00:00
|
|
|
export let alltopics;
|
|
|
|
|
2022-05-08 12:02:37 +00:00
|
|
|
let items = [];
|
|
|
|
|
2022-05-19 15:51:06 +00:00
|
|
|
$: fetch(`/learn/items.json?_shape=array&topics__contains=${topicname}`)
|
2022-05-08 12:02:37 +00:00
|
|
|
.then(r => r.json())
|
|
|
|
.then(data => {
|
|
|
|
items = data;
|
2022-05-16 17:24:19 +00:00
|
|
|
});
|
2022-05-08 12:02:37 +00:00
|
|
|
</script>
|
|
|
|
|
2022-05-11 14:08:38 +00:00
|
|
|
|
2022-05-23 17:50:08 +00:00
|
|
|
<TopicMasonryGrid {topicname} {alltopics}/>
|
2022-05-08 12:02:37 +00:00
|
|
|
|
2022-05-23 17:30:22 +00:00
|
|
|
<!-- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
2022-05-16 17:24:19 +00:00
|
|
|
{#each items as item}
|
|
|
|
<ItemCard {item}/>
|
|
|
|
{/each}
|
2022-05-23 17:30:22 +00:00
|
|
|
</div> -->
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<div class="">
|
|
|
|
<sl-tab-group>
|
|
|
|
{#each formats as format}
|
|
|
|
<sl-tab slot="nav" panel="general" class="px-2 py-1 bg-gray-900 rounded-md mr-3 mb-3 text-gray-200 shadow hover:text-gray-100 hover:bg-gray-800">{format.name}</sl-tab>
|
|
|
|
|
|
|
|
{#if format.id == 'book'}
|
|
|
|
<sl-tab-panel name="general">
|
|
|
|
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
|
|
|
|
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
|
|
|
<BookCard {item}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
</sl-tab-panel>
|
|
|
|
|
|
|
|
|
|
|
|
{:else if format.id == 'video'}
|
|
|
|
<sl-tab-panel name="general">
|
|
|
|
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
|
|
|
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
|
|
|
<VideoCard {item}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
</sl-tab-panel>
|
|
|
|
|
|
|
|
{:else}
|
|
|
|
<sl-tab-panel name="general">
|
|
|
|
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
|
|
|
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
|
|
|
<GenericCard {item}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
</sl-tab-panel>
|
|
|
|
{/if}
|
|
|
|
{/each}
|
|
|
|
</sl-tab-group>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- {#each formats as format}
|
|
|
|
<h1>{format.name}</h1>
|
|
|
|
{#if format.id == 'book'}
|
|
|
|
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
|
|
|
|
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
|
|
|
<BookCard {item}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{:else if format.id == 'video'}
|
|
|
|
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
|
|
|
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
|
|
|
<VideoCard {item}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{:else}
|
|
|
|
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
|
|
|
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
|
|
|
<GenericCard {item}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
{/each} -->
|
2022-05-16 17:24:19 +00:00
|
|
|
</div>
|
2022-05-08 12:02:37 +00:00
|
|
|
|
2022-05-20 08:46:06 +00:00
|
|
|
|