28 lines
1.4 KiB
Vue
28 lines
1.4 KiB
Vue
<template>
|
|
<template v-if="model">
|
|
<div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center">
|
|
<TextInput label="Nom" v-model="model.name" class="flex-none"/>
|
|
<Switch label="Privé ?" :default-value="model.visibility === 'private'" @update:model-value="(e) => model!.visibility = e ? 'private' : 'public'" />
|
|
<Button @click="emit('next')">Suivant</Button>
|
|
</div>
|
|
<div class="flex flex-1 gap-4 p-2 overflow-x-auto justify-center">
|
|
<div v-for="(people, i) of config.peoples" @click="model.people = i" class="flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35
|
|
cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]" :class="{ '!border-accent-blue outline-2 outline outline-accent-blue': model.people === i }">
|
|
<span class="text-xl font-bold text-center">{{ people.name }}</span>
|
|
<Avatar :src="people.name" :text="`Image placeholder`" class="h-[320px]" />
|
|
<span class="text-wrap word-break">{{ people.description }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Character, CharacterConfig } from '~/types/character';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig,
|
|
}>();
|
|
const model = defineModel<Character>();
|
|
|
|
const emit = defineEmits(['next']);
|
|
</script> |