arthur/spanish-learner
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/spanish-learner.git synced 2026-01-30 11:47:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Working

Browse Source
This commit is contained in:
Arthur Danjou
2024-08-14 15:34:06 +02:00
parent 34937fc3c9
commit 2d64c753cc
8 changed files with 191 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/components/Words.vue
View File

@@ -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>