Working

app/app.vue

@@ -3,15 +3,28 @@ useHead({
   link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
   title: 'Spanish Learning Process • By Arthur Danjou',
 })
+
+const mode = useCookie('mode')
+mode.value = mode.value || 'Spanish'
 </script>
 
 <template>
   <div>
     <NuxtLoadingIndicator />
     <UContainer>
-      <div class="bg-neutral-900 rounded-lg max-h-[96vh] h-[96vh] overflow-scroll p-4">
+      <div class="my-4 flex items-center justify-between">
+        <p>Mode: {{ mode }}</p>
+        <UButton
+          :color="mode === 'Spanish' ? 'cyan' : 'yellow'"
+          variant="solid"
+          :label="mode === 'Spanish' ? 'Switch to French' : 'Switch to Spanish'"
+          @click="mode === 'Spanish' ? mode = 'French' : mode = 'Spanish'"
+        />
+      </div>
+      <div class="bg-neutral-900 rounded-lg max-h-[90vh] h-[90vh] overflow-scroll p-4">
         <Verbs />
         <Words />
+        <Demonstratifs />
         <Modals />
         <Terminaisons />
         <Prononciation />

app/components/Demonstratifs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const columns = [
+  {
+    key: 'french',
+    label: 'French',
+  },
+  {
+    key: 'proche',
+    label: 'Proche',
+  },
+  {
+    key: 'loin',
+    label: 'Loin',
+  },
+  {
+    key: 'lointain',
+    label: 'Très éloigné',
+  },
+]
+
+const rows = [
+  {
+    french: 'ce / cet',
+    proche: 'este',
+    loin: 'ese',
+    lointain: 'aquel',
+  },
+  {
+    french: 'cette',
+    proche: 'esta',
+    loin: 'esa',
+    lointain: 'aquella',
+  },
+  {
+    french: 'ces',
+    proche: 'estos / estas',
+    loin: 'esos / esas',
+    lointain: 'aquellos / aquellas',
+  },
+]
+</script>
+
+<template>
+  <UDivider class="mt-12 mb-8" size="lg" label="Démonstratifs" />
+  <UTable :rows="rows" :columns="columns" />
+</template>

app/components/Verbs.vue

@@ -6,15 +6,19 @@ async function refreshVerb() {
   revealedVerb.value = false
   await refreshVerbData()
 }
+const mode = useCookie('mode')
 </script>
 
 <template>
   <div v-if="verb" class="space-y-4 mx-auto flex flex-col justify-center">
-    <div class="flex gap-2 items-end">
+    <div class="flex gap-2 items-center">
       <h3 class="text-neutral-500">
         Verbos:
       </h3>
-      <h1 class="font-bold">
+      <h1 v-if="mode === 'Spanish'" class="font-bold">
+        {{ verb.verb }}
+      </h1>
+      <h1 v-else class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
         {{ verb.verb }}
       </h1>
     </div>
@@ -23,14 +27,17 @@ async function refreshVerb() {
         Typo:
       </h3>
       <h1 class="font-bold">
-        {{ verb.type }}
+        -{{ verb.verb.slice(-2) }}
       </h1>
     </div>
-    <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true">
+    <div class="flex gap-2 items-center">
       <h3 class="text-neutral-500">
         Traduccion:
       </h3>
-      <h1 class="font-bold" :class="revealedVerb ? 'duration-300' : 'bg-black text-black'">
+      <h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
+        {{ verb.translation }}
+      </h1>
+      <h1 v-else class="font-bold">
         {{ verb.translation }}
       </h1>
     </div>

app/components/Words.vue

@@ -1,36 +1,37 @@
 <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()
 }
+
+const mode = useCookie('mode')
 </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">
+    <div class="flex gap-2 items-center">
       <h3 class="text-neutral-500">
         Palabra:
       </h3>
-      <h1 class="font-bold">
+      <h1 v-if="mode === 'Spanish'" class="font-bold">
+        {{ word.word }}
+      </h1>
+      <h1 v-else class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
         {{ 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">
+    <div class="flex gap-2 items-center 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'">
+      <h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
+        {{ word.translation }}
+      </h1>
+      <h1 v-else class="font-bold">
         {{ word.translation }}
       </h1>
     </div>