import React,{useState} from 'react'
import {createRoot} from 'react-dom/client'
import './style.css'

function App(){
 const [text,setText]=useState("")
 const [result,setResult]=useState("")

 async function translate(){
  let r=await fetch('/api/translate',{
   method:'POST',
   headers:{'Content-Type':'application/json'},
   body:JSON.stringify({
    text,
    source:'auto',
    target:'en'
   })
  })
  let j=await r.json()
  setResult(j.translation||JSON.stringify(j))
 }

 return <main>
 <header>FerrTranslate</header>
 <section className="box">
 <textarea placeholder="输入文字..." value={text} onChange={e=>setText(e.target.value)}/>
 <button onClick={translate}>Translate</button>
 <div className="result">{result}</div>
 </section>
 </main>
}

createRoot(document.getElementById('root')).render(<App/>)