前面幾天我們成功在 GitHub Codespaces 建立了雲端 React 環境，並順利掛載了 Tailwind CSS。今天我們要開始動手寫程式，打造整個「AI 智慧用藥監測系統」的第一個視覺骨架——頂部導覽列 (Navbar) 與主頁面排版。
為什麼好的 Layout 從 Navbar 開始？
一個合格的健康管理系統，使用者一打開必須能立刻看見系統名稱、當前登入狀態以及快速導航按鈕。我們將利用 Tailwind 的 Flexbox 排版工具，快速刻出一個兼具現代感與清爽醫療藍色調的導覽列。
Step 1：編寫導覽列元件 (Navbar)
在 src 資料夾下新增一個 components 資料夾，並在裡面建立 Navbar.jsx，寫入以下程式碼：
Step 2：整合至主畫面 App.jsx
接著，打開 src/App.jsx，將我們剛剛寫好的 Navbar 引入，並加上主畫面的基礎容器：
把這些都設置好後打開我們的網頁就會得到下圖
iThome鐵人賽
看影片追技術