40 lines
1.3 KiB
Svelte
40 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { createQuery } from '@tanstack/svelte-query'
|
|
import Homeworld from './Homeworld.svelte'
|
|
import Film from './Film.svelte'
|
|
import { getCharacter } from '$lib/api'
|
|
import { page } from '$app/state'
|
|
|
|
const query = createQuery(() => ({
|
|
queryKey: ['character', page.params.characterId],
|
|
queryFn: () => getCharacter(page.params.characterId),
|
|
}))
|
|
</script>
|
|
|
|
{#if query.status === 'pending'}
|
|
<p>Loading...</p>
|
|
{/if}
|
|
|
|
{#if query.status === 'error'}
|
|
<p>Error :(</p>
|
|
{/if}
|
|
|
|
{#if query.status === 'success'}
|
|
{@const homeworldUrlParts = query.data.homeworld.split('/').filter(Boolean)}
|
|
{@const homeworldId = homeworldUrlParts[homeworldUrlParts.length - 1]}
|
|
<h2 class="text-4xl">{query.data.name}</h2>
|
|
|
|
<p><strong>Born</strong>: {query.data.birth_year}</p>
|
|
<p><strong>Eyes</strong>: {query.data.eye_color}</p>
|
|
<p><strong>Hair</strong>: {query.data.hair_color}</p>
|
|
<p><strong>Height</strong>: {query.data.height}</p>
|
|
<p><strong>Mass</strong>: {query.data.mass}</p>
|
|
<p><strong>Homeworld</strong>: <Homeworld {homeworldId} /></p>
|
|
<h4 class="text-2xl pt-4">Films</h4>
|
|
{#each query.data.films as film}
|
|
{@const filmUrlParts = film.split('/').filter(Boolean)}
|
|
{@const filmId = filmUrlParts[filmUrlParts.length - 1]}
|
|
<Film {filmId} />
|
|
{/each}
|
|
{/if}
|