mirror of
https://github.com/ArthurDanjou/spanish-learner.git
synced 2026-01-14 20:19:32 +01:00
57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<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()
|
|
}
|
|
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-center">
|
|
<h3 class="text-neutral-500">
|
|
Verbos:
|
|
</h3>
|
|
<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>
|
|
<div class="flex gap-2 items-end">
|
|
<h3 class="text-neutral-500">
|
|
Typo:
|
|
</h3>
|
|
<h1 class="font-bold">
|
|
-{{ verb.verb.slice(-2) }}
|
|
</h1>
|
|
</div>
|
|
<div class="flex gap-2 items-center">
|
|
<h3 class="text-neutral-500">
|
|
Traduccion:
|
|
</h3>
|
|
<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>
|
|
<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>
|