Speak Every Language Instantly

AI-powered robot translator breaks language barriers in real time.

Universal Language Translator

Translate text between multiple languages instantly

From

setInputText(e.target.value)}
                  placeholder="Enter text to translate"
                  className="w-full h-40 p-4 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:outline-none resize-none"
                />
                {inputText && (
                  <button
                    onClick={() => setInputText('')}
                    className="absolute top-2 right-2 p-1 text-gray-500 hover:text-gray-700"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                    </svg>
                  </button>
                )}
              </div>
            </div>

<div className="flex-1">
              <div className="mb-4">
                <label htmlFor="targetLanguage" className="block text-sm font-medium text-gray-700 mb-1">
                  To
                </label>
                <select
                  id="targetLanguage"
                  value={targetLanguage}
                  onChange={(e) => setTargetLanguage(e.target.value)}
                  className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:outline-none"
                >
                  {languages.map((lang) => (
                    <option key={lang.code} value={lang.code}>
                      {lang.name}
                    </option>
                  ))}
                </select>
              </div>

<div className="relative">
                <div className="w-full h-40 p-4 border border-gray-300 rounded-md bg-gray-50">
                  {isTranslating ? (
                    <div className="flex items-center justify-center h-full">
                      <div className="animate-pulse text-gray-500">Translating...</div>
                    </div>
                  ) : (
                    <div className="text-gray-800">
                      {translatedText || 'Translation will appear here'}
                    </div>
                  )}
                </div>
                {translatedText && !isTranslating && (
                  <button
                    onClick={() => setTranslatedText('')}
                    className="absolute top-2 right-2 p-1 text-gray-500 hover:text-gray-700"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                    </svg>
                  </button>
                )}
              </div>
            </div>
          </div>

<div className="flex justify-center">
            <button
              onClick={handleTranslate}
              disabled={isTranslating || !inputText.trim()}
              className={`px-6 py-3 rounded-md font-medium text-white ${isTranslating || !inputText.trim() ? 'bg-indigo-400 cursor-not-allowed' : 'bg-indigo-600 hover:bg-indigo-700'} transition-colors`}
            >
              {isTranslating ? 'Translating...' : 'Translate'}
            </button>
          </div>

<div className="mt-8 p-4 bg-indigo-50 rounded-lg">
            <h2 className="text-lg font-semibold text-indigo-800 mb-2">How to use</h2>
            <ol className="list-decimal pl-5 space-y-2 text-gray-700">
              <li>Select the source language (the language of your text)</li>
              <li>Type or paste the text you want to translate</li>
              <li>Select the target language (the language you want to translate to)</li>
              <li>Click the Translate button</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UniversalLanguageTranslator;