Working

app/components/Modals.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const ModalColumns = [
+  {
+    key: 'ser',
+    label: 'Ser',
+  },
+  {
+    key: 'estar',
+    label: 'Estar',
+  },
+  {
+    key: 'tener',
+    label: 'Tener',
+  },
+  {
+    key: 'haber',
+    label: 'Haber',
+  },
+]
+
+const ModalRows = [
+  {
+    ser: 'soy',
+    estar: 'estoy',
+    tener: 'tengo',
+    haber: 'he',
+  },
+  {
+    ser: 'eres',
+    estar: 'estás',
+    tener: 'tienes',
+    haber: 'has',
+  },
+  {
+    ser: 'es',
+    estar: 'está',
+    tener: 'tiene',
+    haber: 'ha',
+  },
+  {
+    ser: 'somos',
+    estar: 'estamos',
+    tener: 'tenemos',
+    haber: 'hemos',
+  },
+  {
+    ser: 'sois',
+    estar: 'estáis',
+    tener: 'tenéis',
+    haber: 'habéis',
+  },
+  {
+    ser: 'son',
+    estar: 'están',
+    tener: 'tienen',
+    haber: 'han',
+  },
+]
+</script>
+
+<template>
+  <UDivider class="mt-12 mb-8" size="lg" label="Ser, Estar, Tener, Haber" />
+  <UTable :columns="ModalColumns" :rows="ModalRows" />
+</template>
+
+<style scoped>
+
+</style>

app/components/Prononciation.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const PrononciationRows = [
+  {
+    sound: 'ca co cu',
+    pronunciation: '/k/',
+    ejemplos: 'casa, coco, cucaracha',
+  },
+  {
+    sound: 'ce ci',
+    pronunciation: '/θ/',
+    ejemplos: 'cena, cine',
+  },
+  {
+    sound: 'ga go',
+    pronunciation: '/g/',
+    ejemplos: 'gato, gorra',
+  },
+  {
+    sound: 'ge gi',
+    pronunciation: '/x/',
+    ejemplos: 'gente, gira',
+  },
+  {
+    sound: 'z',
+    pronunciation: '/θ/',
+    ejemplos: 'zapato',
+  },
+  {
+    sound: 's',
+    pronunciation: '/s/',
+    ejemplos: 'sol',
+  },
+  {
+    sound: 'rr',
+    pronunciation: '/r/',
+    ejemplos: 'perro',
+  },
+  {
+    sound: 'j',
+    pronunciation: '/x/',
+    ejemplos: 'jirafa',
+  },
+  {
+    sound: 'll',
+    pronunciation: '/ʎ/',
+    ejemplos: 'llama',
+  },
+  {
+    sound: 'e',
+    pronunciation: '/e/',
+    ejemplos: 'elefante',
+  },
+  {
+    sound: 'ñ',
+    pronunciation: '/ɲ/',
+    ejemplos: 'niño',
+  },
+]
+</script>
+
+<template>
+  <UDivider class="mt-12 mb-8" size="lg" label="Prononciation" />
+  <UTable :rows="PrononciationRows" />
+</template>
+
+<style scoped>
+
+</style>

app/components/Terminaisons.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const VerbRows = [
+  {
+    person: 'yo',
+    er: 'o',
+    ir: 'o',
+    ar: 'o',
+  },
+  {
+    person: 'tu',
+    er: 'es',
+    ir: 'es',
+    ar: 'as',
+  },
+  {
+    person: 'el/ella/usted',
+    er: 'e',
+    ir: 'e',
+    ar: 'a',
+  },
+  {
+    person: 'nosotros/nosotras',
+    er: 'emos',
+    ir: 'imos',
+    ar: 'amos',
+  },
+  {
+    person: 'vosotros/vosotras',
+    er: 'éis',
+    ir: 'ís',
+    ar: 'áis',
+  },
+  {
+    person: 'ellos/ellas/ustedes',
+    er: 'en',
+    ir: 'en',
+    ar: 'an',
+  },
+]
+
+const VerbColumns = [
+  {
+    key: 'person',
+  },
+  {
+    key: 'er',
+    label: '-ER',
+  },
+  {
+    key: 'ir',
+    label: '-IR',
+  },
+  {
+    key: 'ar',
+    label: '-AR',
+  },
+]
+</script>
+
+<template>
+  <UDivider class="mt-12 mb-8" size="lg" label="Terminaisons" />
+  <UTable :columns="VerbColumns" :rows="VerbRows" />
+</template>
+
+<style scoped>
+
+</style>

app/components/Verbs.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const { data: verb, refresh: refreshVerbData } = await useAsyncData('verb', async () => $fetch('/api/verb'))
+
+const revealedVerb = ref(false)
+async function refreshVerb() {
+  revealedVerb.value = false
+  await refreshVerbData()
+}
+</script>
+
+<template>
+  <div v-if="verb" class="space-y-4 mx-auto flex flex-col justify-center">
+    <div class="flex gap-2 items-end">
+      <h3 class="text-neutral-500">
+        Verbos:
+      </h3>
+      <h1 class="font-bold">
+        {{ verb.verb }}
+      </h1>
+    </div>
+    <div class="flex gap-2 items-end">
+      <h3 class="text-neutral-500">
+        Typo:
+      </h3>
+      <h1 class="font-bold">
+        {{ verb.type }}
+      </h1>
+    </div>
+    <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true">
+      <h3 class="text-neutral-500">
+        Traduccion:
+      </h3>
+      <h1 class="font-bold" :class="revealedVerb ? 'duration-300' : 'bg-black text-black'">
+        {{ verb.translation }}
+      </h1>
+    </div>
+    <UButton
+      :color="revealedVerb ? 'green' : 'red'"
+      variant="solid"
+      :label="revealedVerb ? 'Change Verb' : 'Reveal Verb'"
+      :block="true"
+      @click.prevent="revealedVerb ? refreshVerb() : revealedVerb = true"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/components/Words.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const { data: word, refresh: refreshWordData } = await useAsyncData('word', async () => $fetch('/api/word'))
+const revealedWord = ref(false)
+async function refreshWord() {
+  revealedWord.value = false
+  await refreshWordData()
+}
+</script>
+
+<template>
+  <UDivider class="mt-12 mb-8" size="lg" label="Palabras" />
+  <div v-if="word" class="space-y-4 mx-auto flex flex-col justify-center">
+    <div class="flex gap-2 items-end">
+      <h3 class="text-neutral-500">
+        Palabra:
+      </h3>
+      <h1 class="font-bold">
+        {{ word.word }}
+      </h1>
+    </div>
+    <div class="flex gap-2 items-end">
+      <h3 class="text-neutral-500">
+        Typo:
+      </h3>
+      <h1 class="font-bold">
+        {{ word.type }}
+      </h1>
+    </div>
+    <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedWord = true">
+      <h3 class="text-neutral-500">
+        Traducción:
+      </h3>
+      <h1 class="font-bold" :class="revealedWord ? 'duration-300' : 'bg-black text-black'">
+        {{ word.translation }}
+      </h1>
+    </div>
+    <UButton
+      :color="revealedWord ? 'green' : 'blue'"
+      variant="solid"
+      :label="revealedWord ? 'Change Word' : 'Reveal Word'"
+      :block="true"
+      @click.prevent="revealedWord ? refreshWord() : revealedWord = true"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>