Rework character editor with new Figma design

components/TrainingEditor.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { CharacterConfig, MainStat, TrainingLevel } from '~/types/character';
+import PreviewA from './prose/PreviewA.vue';
+
+const { config } = defineProps<{
+    config: CharacterConfig
+}>();
+
+const selection = ref<{
+    stat: MainStat;
+    level: TrainingLevel;
+    option: number;
+}>();
+
+function focusTraining(stat: MainStat, level: TrainingLevel, option: number)
+{
+    const s = selection.value;
+    if(s !== undefined && s.stat === stat && s.level === level && s.option === option)
+    {
+        selection.value = undefined;
+    }
+    else
+    {
+        selection.value = {
+            stat, level, option
+        };
+    }
+}
+</script>
+
+<template>
+    <TrainingViewer :config="config" progress>
+        <template #default="{ stat, level, option }">
+            <div @click.capture="console.log" class="border border-light-40 dark:border-dark-40 hover:border-light-70 dark:hover:border-dark-70 cursor-pointer px-2 py-1 w-96" :class="{ '!border-accent-blue': selection !== undefined && selection?.stat == stat && selection?.level == level && selection?.option == option }">
+                <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
+            </div>
+        </template>
+    </TrainingViewer>
+</template>

components/TrainingViewer.vue

@@ -58,7 +58,7 @@ onUnmounted(() => {
                             </div>
                         </template>
                         <template v-for="(option, i) in options">
-                            <slot :stat="name" :level="level" :index="i" :option="option"></slot>
+                            <slot :stat="name" :level="level" :option="i"></slot>
                         </template>
                     </div>
                 </div>

components/base/Switch.vue

@@ -1,7 +1,7 @@
 <template>
     <Label class="flex justify-center items-center my-2">
         <span class="md:text-base text-sm">{{ label }}</span>
-        <SwitchRoot v-model:checked="model" :disabled="disabled"
+        <SwitchRoot v-model:checked="model" :disabled="disabled" :default-checked="defaultValue"
             class="group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
         data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
         data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative">
@@ -21,6 +21,7 @@ const { label, disabled, onIcon, offIcon } = defineProps<{
     disabled?: boolean
     onIcon?: string
     offIcon?: string
+    defaultValue?: boolean
 }>();
 const model = defineModel<boolean>();
 </script>

components/character/editor/PeopleEditor.vue

@@ -0,0 +1,28 @@
+<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>