arthur/spanish-learner
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/spanish-learner.git synced 2026-02-02 13:17:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Working

Browse Source
This commit is contained in:
Arthur Danjou
2024-08-16 12:48:53 +02:00
parent 2d64c753cc
commit 727c4cb779
13 changed files with 1217 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
app/components/Verbs.vue
View File

@@ -10,47 +10,48 @@ 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>
<UCard class="md:col-span-2 md:row-span-1">
<template #header>
<h1>Verbos</h1>
</template>
<div v-if="verb" class="space-y-4 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>
<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>
</UCard>
</template>
<style scoped>
</style>