Merge pull request #4 from ridzimeko/dx-alternative

feat: implement alternative translation

src/lib/components/Alternatives.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	export let alternatives: string[];
+</script>
+
+<div class="dx-alternatives">
+	{#if alternatives.length}
+		<div class="dx-alternatives-container">
+			<h4 class="dx-alternatives-title">Alternatives :</h4>
+			{#each alternatives as alt}
+				<p class="dx-alternatives-text">{alt}</p>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style scoped>
+	.dx-alternatives-container {
+		border: 1px solid var(--pico-form-element-border-color);
+		border-right: 0;
+		border-bottom: 0;
+		background-color: var(--pico-form-element-background-color);
+		width: 100%;
+		padding: 0.4rem 1.2rem 1rem 1.2rem;
+		max-height: 200px;
+		overflow: auto;
+	}
+
+	.dx-alternatives-title {
+		font-size: 1em;
+		color: var(--pico-muted-color);
+		margin-left: 0;
+		padding-top: 0.4rem;
+	}
+
+	.dx-alternatives-text {
+		margin: 0.2rem 0;
+	}
+</style>

src/lib/components/DXTextareaInput.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import debounce from '$lib/actions/debounce';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	export let value = '';
+
+	function handleValue() {
+		dispatch('dx-input', { value });
+	}
+</script>
+
+<div>
+	<textarea
+		style="resize: none; margin: 0; height: 100%;"
+		use:debounce={{ value, func: handleValue, duration: 600 }}
+		bind:value
+		placeholder="Enter text here to translate..."
+		aria-label="Translate text input"
+	></textarea>
+</div>

src/lib/components/Textarea.svelte → src/lib/components/DXTextareaResult.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
+	import Alternatives from './Alternatives.svelte';
+
 	export let isLoading = false;
-	export let value;
-	export let label;
+	export let value = '';
+	export let alternatives: string[];
 </script>
 
 <div class="dx-textarea">
+	<textarea aria-label="Translation result" {value} readonly={!value}></textarea>
+	<Alternatives {alternatives} />
 	<div class={isLoading ? 'loading' : ''}></div>
-	<textarea aria-label={label} cols="40" rows="10" {value}></textarea>
 </div>
 
 <style scoped>
 	.dx-textarea {
 		position: relative;
-		height: fit-content;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 
 	.dx-textarea textarea {
 		margin: 0;
 		resize: none;
+		flex-grow: 1;
 	}
 
 	/* From Uiverse.io by satyamchaudharydev */

src/routes/+page.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { ArrowRightLeft } from 'lucide-svelte';
 	import { langs } from '$lib/constants/langs';
-	import debounce from '$lib/actions/debounce';
 	import type { TranslateResult } from '$lib/translate';
-	import Textarea from '$lib/components/Textarea.svelte';
 	import LangSelect from '$lib/components/LangSelect.svelte';
+	import DxTextareaInput from '$lib/components/DXTextareaInput.svelte';
+	import DxTextareaResult from '$lib/components/DXTextareaResult.svelte';
 
 	let text = '';
 	let translatedText = '';
+	let alternatives: string[] = [];
 	let detectedLang = '';
 	let isLoading = false;
 
@@ -19,6 +20,7 @@
 		if (!text) {
 			detectedLang = '';
 			translatedText = '';
+			alternatives = [];
 			return false;
 		}
 
@@ -34,6 +36,7 @@
 			const data: TranslateResult = await res.json();
 			translatedText = data.translatedText;
 			detectedLang = data.detectedLanguage.language;
+			alternatives = data.alternatives;
 			isLoading = false;
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		} catch (error: any) {
@@ -75,16 +78,9 @@
 			langs={langs.slice(1)}
 		/>
 	</div>
-	<div class="grid" style="gap: 0;">
-		<textarea
-			style="resize: none; margin: 0;"
-			use:debounce={{ value: text, func: getTranslate, duration: 750 }}
-			bind:value={text}
-			cols="30"
-			rows="10"
-			placeholder="Enter text..."
-		></textarea>
-		<Textarea label="Translate result" {isLoading} value={translatedText} />
+	<div class="grid dxtranslate-form">
+		<DxTextareaInput bind:value={text} on:dx-input={(e) => getTranslate()} />
+		<DxTextareaResult value={translatedText} {alternatives} {isLoading} />
 	</div>
 </div>
 
@@ -100,4 +96,15 @@
 		background: transparent;
 		border: none;
 	}
+
+	.dxtranslate-form {
+		gap: 0;
+		height: 360px;
+	}
+
+	@media (max-width: 768px) {
+		.dxtranslate-form {
+			height: 512px;
+		}
+	}
 </style>