Stage

src/FoodOrderer.tsx

@@ -4,7 +4,9 @@ interface ShopItem {
   name: string,
   need: number,    // 需求数量 
   provide: number, // 提供的数量
-  imageUrl: string
+  image: {
+    src: string
+  }
 }
 
 const shopItems: ShopItem[] = [
@@ -12,51 +14,96 @@ const shopItems: ShopItem[] = [
     name: "Apple",
     need: 10,
     provide: 5,
-    imageUrl: "https://example.com/images/apple.png"
+    image: {
+      src: "https://i.imgur.com/FsNUv2x.jpeg"
+    }
   },
   {
-    name: "Orange",
+    name: "Orange Jam",
     need: 8,
     provide: 10,
-    imageUrl: "https://example.com/images/orange.png"
+    image: {
+      src: "https://i.imgur.com/hB46Z9s.png"
+    }
   },
   {
-    name: "Milk",
-    need: 15,
-    provide: 20,
-    imageUrl: "https://example.com/images/milk.png"
+    name: "Milk (Gone bad)",
+    need: 0,
+    provide: 3,
+    image: {
+      src: "https://i.imgur.com/ZV7vzDu.png"
+    }
   },
   {
     name: "Bread",
     need: 12,
     provide: 6,
-    imageUrl: "https://example.com/images/bread.png"
+    image: {
+      src: "https://i.imgur.com/qBn8jWS.jpeg"
+    }
   }
 ];
 
 
-function FoodList({list,setList}:{
-list: ShopItem[],
-setList: React.Dispatch<React.SetStateAction<ShopItem[]>> 
+function FoodList({ list, setList }: {
+  list: ShopItem[],
+  setList: React.Dispatch<React.SetStateAction<ShopItem[]>>
 }) {
+  enum ButtonOperation {INCREASE , DECREASE}
+  const handleVolumeButton = (item: ShopItem ,operation: ButtonOperation) => {
+    const nowNeed = item.need
+    switch (operation) {
+      case ButtonOperation.INCREASE:
+        if (nowNeed >= item.provide){
+          return
+        }
+        setList(list.map((it)=> 
+          it == item? {...it,need: nowNeed+1}:it
+        ))
+        break
+      case ButtonOperation.DECREASE:
+        if (nowNeed <= 0){
+          return
+        }
+        setList(list.map((it)=> 
+          it == item? {...it,need: nowNeed-1}:it
+        ))
+        break
+    }
+  }
 
-  return(
-  <div>
+
+  return (
+    <div className="table gap-3 min-w-max space-y-3 mx-auto items-center">
       {list.map((item) =>
+        <div key={item.name} className="flex gap-5 bg-slate-200 rounded-md shadow-md border-spacing-1 px-5 py-2">
+          <img className="size-24 rounded-full" {...item.image} />
+          <div>
+            <p className="text-3xl">{item.name}</p>
             <div className="flex">
-      
+              <button 
+                onClick={()=>handleVolumeButton(item,ButtonOperation.DECREASE)} 
+                className="size-6 bg-lime-50 rounded-2xl">-</button>
+              <p>{item.need}</p>
+              <button 
+                onClick={()=>handleVolumeButton(item,ButtonOperation.INCREASE)}
+                className="size-6 bg-red-50 rounded-2xl">+</button>
+            </div>
+          </div>
         </div>
       )}
     </div>
-)}
+  )
+}
 
 
 const FoodOrderer = () => {
-  const [items,setItems] = useState<ShopItem[]>(shopItems)
+  const [items, setItems] = useState<ShopItem[]>(shopItems)
   return (
-    <>
+    <div className="items-center">
+      <p className="text-center">点些什么</p>
       <FoodList list={items} setList={setItems} />
-    </>
+    </div>
   )
 
 }