File size: 2,366 Bytes
01fcadf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script lang="ts">
import { Suspense } from "@svelte-drama/suspense";
import { Settings } from "@utils/settings/index";
export let page;
export let lang;
async function getAssets() {
const response = await fetch("/api/catalog-assets?page=" + page);
const data = await response.json();
return data.assets;
}
const assets = getAssets();
</script>
<div class="text-3xl font-roboto font-bold text-text-color p-10">
<Suspense let:suspend>
<div slot="loading">
<p class="text-4xl"> Loading... </p>
</div>
{#await suspend(assets) then data}
{#if Object.keys(data).length > 0}
<div class="flex flex-row gap-6 flex-wrap justify-center">
{#each Object.entries(data) as [key, asset]}
<a href={`/${lang}/catalog/package/${key}`}>
<div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
<img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
<div class="p-6 text-sm">
<p class="font-semibold text-2xl mb-2"> {asset.title} </p>
<p class="mb-4"> {asset.description} </p>
<div class="flex flex-wrap gap-2 mb-4 w-full">
{#each asset.tags as tag}
<p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> {tag} </p>
{/each}
</div>
<div>
<strong>Version:</strong>
{asset.version}
</div>
<div><strong>Type:</strong> {asset.type === "plugin-page" || asset.type === "plugin-sw" ? "plugin" : asset.type}</div>
</div>
</div>
</a>
{/each}
</div>
{/if}
{/await}
</Suspense>
</div>
|