File size: 1,600 Bytes
e4d8414 536c211 15fd5c0 796d3e2 94ecbeb 7338211 796d3e2 7338211 e4d8414 94ecbeb e4d8414 7338211 e4d8414 001000b 94ecbeb e4d8414 94ecbeb 15fd5c0 e4d8414 94ecbeb b86b61f 7338211 94ecbeb e4d8414 94ecbeb 15fd5c0 796d3e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import { createSignal, createResource } from 'solid-js'
import './style.css'
interface ITranslation {
originalText: string
translatedText?: string
}
interface InputTextState {
text?: string
}
export default function App() {
const [ text, setText ] = createSignal<InputTextState | null>(null)
const [ translation, { mutate } ] = createResource(text, fetchData)
let textarea: HTMLTextAreaElement | undefined
async function fetchData(input: InputTextState): Promise<ITranslation | null> {
const { text } = input
if (!text || translation.loading) { return null }
if (translation()) { mutate(null) }
const response = await fetch(`/api/translate?text=${text}`, { method: "POST" })
.then(response => response.status===200? response.json() : response.text())
.then(response => response?.text ?? response)
.catch(() => null)
return { originalText: text, translatedText: response }
}
return (
<main class="w-screen my-24 mx-5">
<div class="w-1/2 py-4 px-2 flex justify-end">
<button onclick={() => {
setText({ text: textarea?.value })
}}>Translate</button>
</div>
<section class="flex">
{/* amber-500 */}
<textarea class="h-64 p-2 w-1/2 bg-zinc-700" placeholder="Insert input text..." ref={textarea} />
<textarea class="h-64 p-7 w-1/2 text-2xl" placeholder={translation.loading? "Translating..." : "Translation"} readonly value={translation()?.translatedText ?? ''} />
</section>
</main>
)
}
|