Working

app.vue

@@ -1,24 +0,0 @@
-<template>
-  <UContainer>
-    <UCard class="mt-10">
-      <template #header>
-        <div class="flex justify-between">
-          <h1>Welcome to Nuxt UI Starter</h1>
-          <ColorScheme>
-            <USelect
-              v-model="$colorMode.preference"
-              :options="['system', 'light', 'dark']"
-            />
-          </ColorScheme>
-        </div>
-      </template>
-      <UButton
-        icon="i-heroicons-book-open"
-        to="https://ui.nuxt.com"
-        target="_blank"
-      >
-        Open Nuxt UI Documentation
-      </UButton>
-    </UCard>
-  </UContainer>
-</template>

app/app.vue

@@ -26,8 +26,8 @@ async function revealWord() {
   <div>
     <NuxtLoadingIndicator />
     <UContainer>
-      <div class="bg-neutral-800 rounded-lg max-h-[96vh] h-[96vh] overflow-scroll">
+      <div class="bg-neutral-800 rounded-lg max-h-[96vh] h-[96vh] overflow-scroll p-4">
-        <div v-if="verb" class="space-y-4 h-1/2 w-2/3 mx-auto flex flex-col justify-center">
+        <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-xl text-neutral-500">
               Verbos:
@@ -55,13 +55,13 @@ async function revealWord() {
           <UButton
             color="blue"
             variant="solid"
-            label="Refresh"
+            label="Reveal Verb"
             :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 v-if="word" class="space-y-4 mx-auto flex flex-col justify-center">
           <div class="flex gap-2 items-end">
             <h3 class="text-xl text-neutral-500">
               Palabra:
@@ -72,16 +72,24 @@ async function revealWord() {
           </div>
           <div class="flex gap-2 items-end">
             <h3 class="text-xl text-neutral-500">
-              Tradución:
+              Typo:
             </h3>
             <h1 class="text-3xl font-bold">
+              {{ word.type }}
+            </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" :class="revealedWord ? '' : 'bg-black text-black'">
               {{ word.translation }}
             </h1>
           </div>
           <UButton
             color="red"
             variant="solid"
-            label="Refresh"
+            label="Reveal Word"
             :block="true"
             @click.prevent="revealWord()"
           />

server/database/migrations/0002_amazing_khan.sql

@@ -0,0 +1 @@
+ALTER TABLE `words` ADD `type` text DEFAULT '';

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

@@ -0,0 +1,112 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "d7a2a05d-0984-4674-bbc3-35dbb9442202",
+  "prevId": "b47037ef-03cc-45d7-b297-e1d1b8dbf3fe",
+  "tables": {
+    "verbs": {
+      "name": "verbs",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "verb": {
+          "name": "verb",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "translation": {
+          "name": "translation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_DATE)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "words": {
+      "name": "words",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "word": {
+          "name": "word",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "translation": {
+          "name": "translation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_DATE)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/database/migrations/meta/_journal.json

@@ -15,6 +15,13 @@
       "when": 1721924389034,
       "tag": "0001_conscious_plazm",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "6",
+      "when": 1722366523692,
+      "tag": "0002_amazing_khan",
+      "breakpoints": true
     }
   ]
 }

server/database/schema.ts

@@ -4,14 +4,15 @@ import { sql } from 'drizzle-orm'
 export const verbs = sqliteTable('verbs', {
   id: integer('id').primaryKey(),
   verb: text('verb').default(''),
-  translation: text('translation').default(''),
   type: text('type', { enum: ['-ar', '-er', '-ir'] }),
+  translation: text('translation').default(''),
   createdAt: text('created_at').default(sql`(CURRENT_DATE)`),
 })
 
 export const words = sqliteTable('words', {
   id: integer('id').primaryKey(),
   word: text('word').default(''),
+  type: text('type').default(''),
   translation: text('translation').default(''),
   createdAt: text('created_at').default(sql`(CURRENT_DATE)`),
 })

tailwind.config.ts

@@ -1,25 +0,0 @@
-import type { Config } from 'tailwindcss'
-import typography from '@tailwindcss/typography'
-
-export default <Partial<Config>>{
-  content: [
-    './components/**/*.{vue,js,ts}',
-    './layouts/**/*.vue',
-    './pages/**/*.vue',
-    './composables/**/*.{js,ts}',
-    './plugins/**/*.{js,ts}',
-    './utils/**/*.{js,ts}',
-    './App.{js,ts,vue}',
-    './app.{js,ts,vue}',
-    './Error.{js,ts,vue}',
-    './error.{js,ts,vue}',
-    './app.config.{js,ts}',
-    'content/**/*.md',
-  ],
-  theme: {
-    extend: {
-
-    },
-  },
-  plugins: [typography],
-}