Added world creation dialog

components/global/Heading.vue

@@ -1,5 +1,23 @@
+<script lang="ts" setup>
+type HeadingLevel = "h1" | "h2" | "h3"
+
+interface HeadingProps {
+  level?: HeadingLevel
+}
+
+withDefaults(defineProps<HeadingProps>(), {
+  level: "h2"
+})
+</script>
+
 <template>
-  <h1 class="text-2xl font-bold flex">
+  <h1 v-if="level === 'h1'" class="text-4xl font-bold flex">
     <slot />
   </h1>
+  <h2 v-else-if="level === 'h2'" class="text-2xl font-bold flex">
+    <slot />
+  </h2>
+  <h3 v-if="level === 'h3'" class="text-xl font-bold flex">
+    <slot />
+  </h3>
 </template>

components/global/input/Color.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { type RPGColor, rpgColors } from "~/models/Color";
+
+const model = defineModel<RPGColor>()
+</script>
+
+<template>
+  <UiSelect v-model="model">
+    <UiSelectTrigger>
+      <UiSelectValue :placeholder="$t('ui.colors.selectOne')" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectGroup>
+        <UiSelectItem v-for="color in rpgColors" :key="color" :value="color">
+          {{ $t(`ui.colors.${color}`) }}
+        </UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+</template>