27 lines
1.3 KiB
Vue
27 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const { data: characters, error, status } = await useFetch(`/api/character`, { params: { visibility: "public" } });
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>d[any] - Liste des personnages</Title>
|
|
</Head>
|
|
<div class="flex flex-col">
|
|
<div v-if="status === 'pending'" class="flex flex-1 justify-center align-center">
|
|
<Loading size="large" />
|
|
</div>
|
|
<div v-else-if="status === 'success'" class="grid p-6 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-4 w-full">
|
|
<div class="border border-light-30 dark:border-dark-30 p-3 flex flex-row gap-4" v-for="character of characters">
|
|
<Avatar size="large" icon="radix-icons:person" src="" />
|
|
<div class="flex flex-1 flex-shrink flex-col truncate">
|
|
<NuxtLink class="text-xl font-bold hover:text-accent-blue truncate" :to="{ name: 'character-id', params: { id: character.id } }" :title="character.name">{{ character.name }}</NuxtLink>
|
|
<span class="text-sm truncate">Niveau {{ character.level }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<span>Erreur de chargement</span>
|
|
<span>{{ error?.message }}</span>
|
|
</div>
|
|
</div>
|
|
</template> |