app.js

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>
  );
}