36 lines
1.3 KiB
Svelte
36 lines
1.3 KiB
Svelte
<script>
|
|
import Input from "$lib/components/base/Input.svelte";
|
|
import IconBase from "$lib/components/icons/IconBase.svelte";
|
|
import { onMount } from "svelte";
|
|
|
|
let brawlsets = $state([])
|
|
let displayedBrawlsets = $state([])
|
|
let searchQuery = $state("")
|
|
|
|
function filterBrawlsets() {
|
|
displayedBrawlsets = brawlsets.filter((brawlset) => brawlset.Name.toLowerCase().includes(searchQuery.toLowerCase()))
|
|
}
|
|
|
|
onMount(async () => {
|
|
fetch("/json/misc/brawlsets")
|
|
.then( response => response.json() )
|
|
.then( data => { brawlsets = displayedBrawlsets = data; console.log(data) } )
|
|
})
|
|
|
|
</script>
|
|
|
|
<div class="m-auto max-w-4xl flex flex-col gap-4 p-8">
|
|
<Input oninput={filterBrawlsets} bind:value={searchQuery} type="text" placeholder="Rechercher des brawlsets" autofocus/>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
|
|
{#each displayedBrawlsets as brawlset}
|
|
<a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
|
|
<div class="flex flex-row items-center">
|
|
{#each brawlset.IconsSvgUri as icon}
|
|
<IconBase src={icon} alt={"Set icon for " + brawlset.Name} />
|
|
{/each}
|
|
</div>
|
|
<span>{brawlset.Name}</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|