Working

app.config.ts

@@ -1,6 +0,0 @@
-export default defineAppConfig({
-  ui: {
-    primary: 'lime',
-    gray: 'neutral',
-  },
-})

app/app.config.ts

@@ -1,9 +1,16 @@
 export default defineAppConfig({
   ui: {
     gray: 'neutral',
-    primary: 'gray',
+    primary: 'red',
-    icons: {
+    container: {
-      dynamic: true,
+      constrained: 'max-w-xl',
+      padding: 'px-4 sm:px-6 lg:px-8 py-4',
+    },
+    divider: {
+      base: 'flex border-gray-700',
     },
   },
+  icon: {
+    collections: ['heroicons', 'ph'],
+  },
 })

app/app.vue

@@ -1,36 +1,104 @@
 <script lang="ts" setup>
+import { ModalColumns, ModalRows, VerbColumns, VerbRows } from '~~/types'
+
 useHead({
   link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
+  title: 'Spanish Learning Process • By Arthur Danjou',
 })
+
+const { data: verb, refresh: refreshVerb } = await useAsyncData('verb', async () => $fetch('/api/verb'))
+const { data: word, refresh: refreshWord } = await useAsyncData('word', async () => $fetch('/api/word'))
+
+const revealedVerb = ref(false)
+async function revealVerb() {
+  revealedVerb.value = false
+  await refreshVerb()
+}
+
+const revealedWord = ref(false)
+async function revealWord() {
+  revealedWord.value = false
+  await refreshWord()
+}
 </script>
 
 <template>
   <div>
-    <NuxtLoadingIndicator color="#808080" />
+    <NuxtLoadingIndicator />
     <UContainer>
-      <NuxtPage />
+      <div class="bg-neutral-800 rounded-lg max-h-[96vh] h-[96vh] overflow-scroll">
+        <div v-if="verb" class="space-y-4 h-1/2 w-2/3 mx-auto flex flex-col justify-center">
+          <div class="flex gap-2 items-end">
+            <h3 class="text-xl text-neutral-500">
+              Verbos:
+            </h3>
+            <h1 class="text-3xl font-bold">
+              {{ verb.verb }}
+            </h1>
+          </div>
+          <div class="flex gap-2 items-end">
+            <h3 class="text-xl text-neutral-500">
+              Typo:
+            </h3>
+            <h1 class="text-3xl font-bold">
+              {{ verb.type }}
+            </h1>
+          </div>
+          <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true">
+            <h3 class="text-xl text-neutral-500">
+              Traducion:
+            </h3>
+            <h1 class="text-3xl font-bold" :class="revealedVerb ? '' : 'bg-black text-black'">
+              {{ verb.translation }}
+            </h1>
+          </div>
+          <UButton
+            color="blue"
+            variant="solid"
+            label="Refresh"
+            :block="true"
+            @click.prevent="revealVerb()"
+          />
+        </div>
+        <UDivider class="mt-8 mb-4" label="Palabras" />
+        <div v-if="word" class="space-y-4 h-1/2 w-2/3 mx-auto flex flex-col justify-center">
+          <div class="flex gap-2 items-end">
+            <h3 class="text-xl text-neutral-500">
+              Palabra:
+            </h3>
+            <h1 class="text-3xl font-bold">
+              {{ word.word }}
+            </h1>
+          </div>
+          <div class="flex gap-2 items-end">
+            <h3 class="text-xl text-neutral-500">
+              Tradución:
+            </h3>
+            <h1 class="text-3xl font-bold">
+              {{ word.translation }}
+            </h1>
+          </div>
+          <UButton
+            color="red"
+            variant="solid"
+            label="Refresh"
+            :block="true"
+            @click.prevent="revealWord()"
+          />
+        </div>
+        <UDivider class="mt-8 mb-4" label="Ser, Estar, Tener, Haber" />
+        <UTable :columns="ModalColumns" :rows="ModalRows" />
+        <UDivider class="mt-8 mb-4" label="Terminaisons" />
+        <UTable :columns="VerbColumns" :rows="VerbRows" />
+      </div>
     </UContainer>
   </div>
+  <NuxtPage />
 </template>
 
 <style>
 body {
   font-family: 'DM Sans', sans-serif;
-  @apply h-full w-full text-neutral-700 dark:text-neutral-300;
+  @apply h-full w-full text-neutral-300;
-}
-
-.page-enter-active,
-.page-leave-active {
-  transition: all 0.2s;
-}
-
-.page-leave-to {
-  opacity: 0;
-  transform: translateY(-5px);
-}
-
-.page-enter-from {
-  opacity: 0;
-  transform: translateY(5px);
 }
 </style>

app/pages/index.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>
-    <h1>Home</h1>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

nuxt.config.ts

@@ -1,25 +1,12 @@
 export default defineNuxtConfig({
   future: { compatibilityVersion: 4 },
 
-  // Nuxt App
-  app: {
-    pageTransition: { name: 'page', mode: 'out-in' },
-    head: {
-      templateParams: {
-        separator: '•',
-      },
-    },
-  },
-
   // Nuxt Modules
   modules: [
     '@nuxthub/core',
     '@nuxt/ui',
-    '@nuxt/content',
     '@vueuse/nuxt',
     '@nuxtjs/google-fonts',
-    '@nuxthq/studio',
-    '@nuxt/image',
   ],
 
   // Nuxt Hub
@@ -29,17 +16,10 @@ export default defineNuxtConfig({
     analytics: true,
   },
 
-  // Nuxt Content
-  content: {
-    highlight: {
-      theme: 'github-dark',
-    },
-  },
-
   // Nuxt Color Mode
   colorMode: {
-    preference: 'system',
+    preference: 'dark',
-    fallback: 'light',
+    fallback: 'dark',
   },
 
   // Nuxt Devtools
@@ -52,7 +32,6 @@ export default defineNuxtConfig({
   googleFonts: {
     display: 'swap',
     families: {
-      'Inter': [400, 500, 600, 700, 800, 900],
       'DM Sans': [400, 500, 600, 700, 800, 900],
     },
   },
@@ -64,5 +43,5 @@ export default defineNuxtConfig({
     },
   },
 
-  compatibilityDate: '2024-07-23',
+  compatibilityDate: '2024-07-08',
 })

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nuxt-starter",
+  "name": "spanish-learner",
   "type": "module",
   "private": true,
   "packageManager": "pnpm@9.5.0",
@@ -15,13 +15,10 @@
   },
   "dependencies": {
     "@iconify/json": "^2.2.230",
-    "@nuxt/content": "^2.13.2",
-    "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "^2.17.0",
-    "@nuxthq/studio": "^2.0.3",
     "@nuxthub/core": "^0.7.1",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "drizzle-orm": "^0.32.1",
+    "drizzle-orm": "^0.31.4",
     "h3-zod": "^0.5.3",
     "nuxt": "^3.12.4",
     "zod": "^3.23.8"
@@ -30,10 +27,10 @@
     "@antfu/eslint-config": "^2.23.2",
     "@nuxt/devtools": "^1.3.9",
     "@nuxt/ui": "^2.17.0",
-    "@types/node": "^20.14.11",
+    "@types/node": "^20.14.12",
     "@vueuse/core": "^10.11.0",
     "@vueuse/nuxt": "^10.11.0",
-    "drizzle-kit": "^0.23.0",
+    "drizzle-kit": "^0.22.8",
     "eslint": "^9.7.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.0.28",

server/api/test.ts

@@ -1,3 +0,0 @@
-export default defineEventHandler(() => {
-  return { hello: 'API' }
-})

server/api/verb.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler(async () => {
+  const verbs = await useDB().query.verbs.findMany()
+  return verbs[Math.floor(Math.random() * verbs.length)]
+})

server/api/word.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler(async () => {
+  const words = await useDB().query.words.findMany()
+  return words[Math.floor(Math.random() * words.length)]
+})

server/database/migrations/meta/0001_snapshot.json

@@ -105,4 +105,4 @@
   "internal": {
     "indexes": {}
   }
-}
+}

server/database/migrations/meta/_journal.json

@@ -17,4 +17,4 @@
       "breakpoints": true
     }
   ]
-}
+}

types/index.ts

@@ -0,0 +1,114 @@
+export 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',
+  },
+]
+
+export const VerbColumns = [
+  {
+    key: 'person',
+  },
+  {
+    key: 'er',
+    label: '-ER',
+  },
+  {
+    key: 'ir',
+    label: '-IR',
+  },
+  {
+    key: 'ar',
+    label: '-AR',
+  },
+]
+
+export const ModalColumns = [
+  {
+    key: 'ser',
+    label: 'Ser',
+  },
+  {
+    key: 'estar',
+    label: 'Estar',
+  },
+  {
+    key: 'tener',
+    label: 'Tener',
+  },
+  {
+    key: 'haber',
+    label: 'Haber',
+  },
+]
+
+export 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',
+  },
+]