File size: 1,356 Bytes
9c69fdb |
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 |
import { useState } from "react";
export default function Translator() {
const [text, setText] = useState("");
const [translation, setTranslation] = useState("");
const translateText = async () => {
if (!text) return;
const response = await fetch("http://localhost:8501/translate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text }),
});
const data = await response.json();
setTranslation(data.translation);
};
return (
<div className="flex flex-col items-center min-h-screen bg-gray-100 p-6">
<h1 className="text-3xl font-bold mb-4">English to Ukrainian Translator</h1>
<textarea
className="w-full max-w-md p-3 border border-gray-300 rounded-md shadow-md"
placeholder="Enter English text..."
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button
onClick={translateText}
className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700"
>
Translate
</button>
{translation && (
<div className="mt-4 p-4 bg-white rounded-lg shadow-md max-w-md">
<h2 className="text-xl font-semibold">Translation:</h2>
<p className="mt-2 text-gray-700">{translation}</p>
</div>
)}
</div>
);
}
|