Dynamically fetch list of icons and services and pass both to the ServiceCard
This commit is contained in:
parent
994c0bd2a0
commit
52593efb62
1 changed files with 27 additions and 3 deletions
|
@ -1,11 +1,35 @@
|
||||||
<svelte:options runes={true} />
|
<svelte:options runes={true} />
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import pages from '$lib/components/pages.json';
|
import ServiceCard from '$lib/components/ServiceCard.svelte';
|
||||||
import Card from '$lib/components/Card.svelte';
|
|
||||||
import type { Service } from '$lib/types/data-types';
|
import type { Service } from '$lib/types/data-types';
|
||||||
|
|
||||||
const services: Array<Service> = $state(pages.services);
|
let services: readonly Service[] = $state.frozen([]);
|
||||||
|
|
||||||
|
let icons: readonly string[] = $state.frozen([]);
|
||||||
|
|
||||||
|
async function get(url: string): Promise<any> {
|
||||||
|
let res = await fetch(url)
|
||||||
|
if (res.ok) {
|
||||||
|
let data = await res.json()
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return Promise.reject()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
get("/data/services").then((data: Service[]) => {
|
||||||
|
services = data
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
get("/assets/icons").then((data: string[]) => {
|
||||||
|
icons = data
|
||||||
|
})
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
Loading…
Reference in a new issue