30天用React打造AI工具箱 Day19

翻譯工具 UI

今天我們先做一個最簡單的「翻譯工具」介面，重點是建立翻譯器的基本結構，像是選擇語言、輸入文字、顯示翻譯結果。

Day19的翻譯工具只需要三個核心功能：

• 輸入文字：一個textarea，用來輸入需要翻譯的內容。
• 選擇語言：一個select下拉選單，讓使用者選擇要翻譯成英文、中文或日文。
• 假翻譯結果：一個結果區塊，顯示模擬的翻譯內容。

新增TranslationTool.jsx

import { useState } from "react"

export default function TranslationTool() {
    const [text, setText] = useState("")
    const [translated, setTranslated] = useState("")
    const [lang, setLang] = useState("en") // 預設翻成英文

    const fakeTranslate = () => {
    // 模擬翻譯結果（只是反轉字串，之後會換成 API）
    setTranslated(text.split("").reverse().join(""))
    }

    return (
    <div className="space-y-4">
        <h1 className="text-2xl font-bold">翻譯工具</h1>

        <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="輸入要翻譯的文字..."
        className="w-full border p-2 rounded"
        rows={4}
        />

        <div className="flex space-x-2">
        <select
            value={lang}
            onChange={(e) => setLang(e.target.value)}
            className="border rounded px-2 py-1"
        >
            <option value="en">英文</option>
            <option value="zh">中文</option>
            <option value="ja">日文</option>
        </select>

        <button
            onClick={fakeTranslate}
            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
            翻譯
        </button>
        </div>

        {translated && (
        <div className="p-3 bg-gray-100 rounded">
            <p className="font-semibold">翻譯結果：</p>
            <p>{translated}</p>
        </div>
        )}
    </div>
    )
}

狀態管理設計

• text：使用者輸入的原始文字
• lang：要翻譯的目標語言。
• translated：最後顯示的翻譯結果。