arthur/spanish-learner
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/spanish-learner.git synced 2026-01-26 09:50:30 +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

8
app/components/Demonstratifs.vue
View File

@@ -41,6 +41,10 @@ const rows = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Démonstratifs" />
<UTable :rows="rows" :columns="columns" />
<UCard class="md:col-span-4">
<template #header>
<h1>Démonstratifs</h1>
</template>
<UTable :rows="rows" :columns="columns" />
</UCard>
</template>

12
app/components/Modals.vue
View File

@@ -59,10 +59,10 @@ const ModalRows = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Ser, Estar, Tener, Haber" />
<UTable :columns="ModalColumns" :rows="ModalRows" />
<UCard class="md:col-span-2 md:row-span-2">
<template #header>
<h1>Modaux</h1>
</template>
<UTable :columns="ModalColumns" :rows="ModalRows" />
</UCard>
</template>
<style scoped>
</style>

12
app/components/Prononciation.vue
View File

@@ -59,10 +59,10 @@ const PrononciationRows = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Prononciation" />
<UTable :rows="PrononciationRows" />
<UCard class="md:row-span-2 md:col-span-2">
<template #header>
<h1>Prononciation</h1>
</template>
<UTable :rows="PrononciationRows" />
</UCard>
</template>
<style scoped>
</style>

12
app/components/Terminaisons.vue
View File

@@ -58,10 +58,10 @@ const VerbColumns = [
</script>
<template>
<UDivider class="mt-12 mb-8" size="lg" label="Terminaisons" />
<UTable :columns="VerbColumns" :rows="VerbRows" />
<UCard class="md:col-span-4 md:row-span-2">
<template #header>
<h1>Terminaisons</h1>
</template>
<UTable :columns="VerbColumns" :rows="VerbRows" />
</UCard>
</template>
<style scoped>
</style>

68
app/components/Translation.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types'
const mode = useCookie('mode')
const sent = ref(false)
const schema = z.object({
text: z.string(),
})
type Schema = z.output<typeof schema>
const state = reactive({
text: undefined,
})
const response = ref()
async function onSubmit(event: FormSubmitEvent<Schema>) {
const body = {
text: event.data.text,
target_lang: mode.value === 'Spanish' ? 'French' : 'Spanish',
source_lang: mode.value === 'Spanish' ? 'Spanish' : 'French',
}
sent.value = true
response.value = await $fetch('/api/translate', {
method: 'POST',
body: JSON.stringify(body),
})
}
function resetForm() {
response.value = null
sent.value = false
state.text = undefined
}
</script>
<template>
<UCard class="md:row-span-1 md:col-span-5 order-first">
<template #header>
<h1>Translation</h1>
</template>
<template #default>
<UForm v-if="!sent" :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
<UFormGroup label="Text to translate" name="text">
<UTextarea v-model="state.text" type="text" />
</UFormGroup>
<UButton type="submit">
Translate in {{ mode === 'Spanish' ? 'French' : 'Spanish' }}
</UButton>
</UForm>
<div v-else>
<div v-if="response" class="mb-4 flex gap-2">
<h1 class="font-bold">
Translated Text:
</h1>
<p class="italic">
{{ response.translated_text }}
</p>
</div>
<h1 v-else class="mb-4 italic">
Loading translation...
</h1>
<UButton label="Translate again" @click.prevent="resetForm()" />
</div>
</template>
</UCard>
</template>

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>

70
app/components/Words.vue
View File

@@ -11,40 +11,40 @@ 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-center">
<h3 class="text-neutral-500">
Palabra:
</h3>
<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>
<UCard class="md:col-span-2 md:row-span-1">
<template #header>
<h1>Palabras</h1>
</template>
<div v-if="word" class="space-y-4 mx-auto flex flex-col justify-center">
<div class="flex gap-2 items-center">
<h3 class="text-neutral-500">
Palabra:
</h3>
<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-center cursor-pointer" @click.prevent="revealedWord = true">
<h3 class="text-neutral-500">
Traducción:
</h3>
<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>
<UButton
:color="revealedWord ? 'green' : 'blue'"
variant="solid"
:label="revealedWord ? 'Change Word' : 'Reveal Word'"
:block="true"
@click.prevent="revealedWord ? refreshWord() : revealedWord = true"
/>
</div>
<div class="flex gap-2 items-center cursor-pointer" @click.prevent="revealedWord = true">
<h3 class="text-neutral-500">
Traducción:
</h3>
<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>
<UButton
:color="revealedWord ? 'green' : 'blue'"
variant="solid"
:label="revealedWord ? 'Change Word' : 'Reveal Word'"
:block="true"
@click.prevent="revealedWord ? refreshWord() : revealedWord = true"
/>
</div>
</UCard>
</template>
<style scoped>
</style>