learndb/src/TopicDetail.svelte

94 wiersze
3.5 KiB
Svelte
Czysty Zwykły widok Historia

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