前言

今天要來更新 JSON data，
並且構建 the Featured view。

實作

• 更新 data

1. 用新的 JSON 文件替換之前的文件
   新的文件中的一組數據如下圖：
   
   可以發現 ingredients 裡的內容由 [Srting] 變成 多個 [Srting] 的集合，
   並新增了 highlights：[String]
2. 進入 Models 新增及修改內容

var highlights:[String]
var ingredients:[Ingredients]
class Ingredients: Identifiable, Decodable {
    var id:UUID?
    var name:String
    var num:Int?
    var denom:Int?
    var unit:String?
}

3. 進入 DataService 給 Ingredients 設置 id

4. 進入 DetailView 修改顯示的 ingredients
只需顯示名字：

• 補充 the FeaturedView
  我設想 the FeaturedView 將會是帶有食譜的可以滑動更換的卡片

1. 檢查 JSON 文件，會發現有名為 "featured" 的 bool 值，
   如果顯示為 true 則顯示圖片，
   false 則跳過。
2. 為每個 "featured" == true 的 recipe 創建一個可滑動變換的矩形

TabView {
            ForEach (0..<model.recipes.count) {
                index in
                if model.recipes[index].featured == true {
                    Rectangle()
                }
            }
        }

在 Previews 添加環境修飾，以便於可以 canvas 可以呈現。
3. 改成可滑動式矩形

4. 用 GeometryReader 調整矩形大小並顯示卡片下面的 indicator

5. 添加圖像
先暫時 hardcode image 名稱並將其圖片和名字堆疊在這個矩形上：


6. 添加頂部及底部的文字


7. 換成多個 image 和 text


這樣 the Featured View 就完成了。