昨天我們完成了系統的頂層導覽列與基礎畫布。今天，我們要把焦點放在系統的核心功能——「今日用藥清單」。為了讓使用者能一眼看清楚吃藥時間，我們將利用 Tailwind CSS 的 Flexbox 與狀態顏色，設計出一目了然的用藥資訊卡片。
我們將延續元件化 (Component-based) 的開發精神，把清單區塊獨立成一個全新的元件，讓主程式保持乾淨。
第一步：建立用藥清單元件
請在 src/components 資料夾底下，新增一個 MedicationList.jsx 檔案。我們先建立一組假資料 (Mock Data) 來模擬從資料庫抓回來的用藥紀錄，接著用 map 迴圈把資料渲染成一張張卡片：
第二步：將清單整合進主畫面
接著回到 src/App.jsx，把剛剛寫好的 MedicationList 匯入，並替換掉我們昨天暫放的佔位文字。將 App.jsx 更新為以下內容：
接著就會出現成功畫面如下圖
iThome鐵人賽
看影片追技術