gui/packages/gui/src/components/SearchPackages/SearchPackages.svelte
2022-11-27 15:08:25 +08:00

35 lines
878 B
Svelte

<script type="ts">
import '$appcss';
import Placeholder from '$components/Placeholder/Placeholder.svelte';
import { packages as packagesStore, initializePackages } from '$libs/stores';
import type { Package } from '$libs/types';
import { onMount } from 'svelte';
let packages: Package[] = [];
let initialized = false;
packagesStore.subscribe((v) => {
packages = v;
});
onMount(async () => {
if (!packages.length && !initialized) {
initialized = true;
initializePackages();
}
});
</script>
<div class="bg-black border border-gray">
<section class="flex">
<h2>Filter Packages</h2>
<input type="search" class="text-white bg-black border border-gray" />
</section>
<ul class="grid grid-cols-3 gap-8 mt-8">
{#each packages as pkg}
<li>
<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
</li>
{/each}
</ul>
</div>