30天用React打造AI工具箱 Day13

加入頁籤切換

昨天我們做了基礎版面骨架，有了側邊欄和主要內容。今天我們要讓右邊的內容區可以隨著選單按鈕切換，這樣未來才能放不同工具。

頁籤切換的核心就是：

• 用一個state記錄「目前選中的頁面」。
• 點擊按鈕時改變state。
• React根據state決定顯示哪個元件。

程式碼

import { useState } from "react"
import TodoApp from "./TodoApp"   // 假設Day11的待辦清單放這裡

export default function Layout(){
  const [active,setActive] = useState("todo")

  return (
    <div className="min-h-screen flex">
      {/* 側邊選單 */}
      <aside className="w-64 bg-gray-800 text-white p-6 space-y-4">
        <h2 className="text-xl font-bold mb-6">AI工具箱</h2>
        <nav className="space-y-2">
          <button
            className={`block w-full text-left px-3 py-2 rounded ${
              active==="todo" ? "bg-blue-600" : "hover:bg-gray-700"
            }`}
            onClick={()=>setActive("todo")}
          >
            待辦清單
          </button>
          <button
            className={`block w-full text-left px-3 py-2 rounded ${
              active==="chat" ? "bg-blue-600" : "hover:bg-gray-700"
            }`}
            onClick={()=>setActive("chat")}
          >
            Chat工具
          </button>
          <button
            className={`block w-full text-left px-3 py-2 rounded ${
              active==="translate" ? "bg-blue-600" : "hover:bg-gray-700"
            }`}
            onClick={()=>setActive("translate")}
          >
            翻譯工具
          </button>
        </nav>
      </aside>

      {/* 主要內容 */}
      <main className="flex-1 bg-gray-50 p-6">
        {active==="todo" && (
          <>
            <h1 className="text-2xl font-bold mb-4">待辦清單</h1>
            <TodoApp/>
          </>
        )}
        {active==="chat" && (
          <h1 className="text-2xl font-bold">這裡未來會放Chat工具</h1>
        )}
        {active==="translate" && (
          <h1 className="text-2xl font-bold">這裡未來會放翻譯工具</h1>
        )}
      </main>
    </div>
  )
}

畫面效果

• 預設顯示TodoApp。
• 點選「Chat工具」或「翻譯工具」，右邊會切換顯示不同內容。
• 選中的頁籤背景會變成藍色，看起來更明顯。

這個頁籤切換雖然簡單，但它其實是很多應用的核心。未來我們的AI工具箱，就能靠這個結構「乾淨地管理多個功能」，而不會全部堆在同一個畫面上。