first_lesson-3

src/components/BuildControls/BuildControl/BuildControl.tsx

+import { IngredientNames } from "@/interfaces/burger-interface";
 import "./BuildControl.css";
 
-interface Props {}
+interface Props {
+  type: IngredientNames;
+  hadlerLess: () => void;
+  hadlerMore: () => void;
+}
 
-export function BuildControl(props: Props) {
-  return null;
+export function BuildControl({ type, hadlerLess, hadlerMore }: Props) {
+  return (
+    <div className="BuildControl">
+      <div className="Label">{type}</div>
+      <button className="Less" onClick={hadlerLess}>
+        Less
+      </button>
+      <button className="More" onClick={hadlerMore}>
+        More
+      </button>
+    </div>
+  );
 }

src/components/BuildControls/BuildControls.tsx

+import { IngredientNames, Ingredients } from "@/interfaces/burger-interface";
 import "./BuildControls.css";
+import { BuildControl } from "@/components/BuildControls/BuildControl/BuildControl";
 
-interface Props {}
+interface Props {
+  ingredients: Ingredients;
+  hadlerLess: (key: IngredientNames) => void;
+  hadlerMore: (key: IngredientNames) => void;
+}
+
+export function BuildControls({ ingredients, hadlerLess, hadlerMore }: Props) {
+  const ingrKeys = Object.keys(ingredients) as (keyof Ingredients)[];
 
-export function BuildControls(props: Props) {
-  return null;
+  return (
+    <div className="BuildControls">
+      {ingrKeys.map((key, i) => (
+        <BuildControl
+          key={key + i}
+          type={key}
+          hadlerLess={() => hadlerLess(key)}
+          hadlerMore={() => hadlerMore(key)}
+        />
+      ))}
+    </div>
+  );
 }

src/components/Burger/Burger.tsx

@@ -8,21 +8,22 @@ interface Props {
 }
 
 export function Burger({ ingredients }: Props) {
-  const ingKeys = Object.keys(ingredients) as (keyof Ingredients)[];
+  const ingredientsKeys = Object.keys(ingredients) as (keyof Ingredients)[];
 
-  let ingList: ReactNode[] = [];
+  let ingrList: ReactNode[] = [];
 
-  ingKeys.forEach((key) => {
-    const amount = ingredients[key];
+  ingredientsKeys.forEach((ingrKey) => {
+    let amount = ingredients[ingrKey];
+
+    for (let i = 0; i < amount; i++) {
+      ingrList.push(<Ingredient key={ingrKey + i} type={ingrKey} />);
+    }
   });
 
   return (
     <div className="Burger">
       <Ingredient type={"bread-top"} />
-      <Ingredient type={"cheese"} />
-      <Ingredient type={"bacon"} />
-      <Ingredient type={"meat"} />
-      <Ingredient type={"salad"} />
+      {ingrList}
       <Ingredient type={"bread-bottom"} />
     </div>
   );

src/components/Burger/Ingredient/Ingredient.tsx

@@ -7,6 +7,8 @@ interface Props {
 
 export function Ingredient({ type }: Props) {
   switch (type) {
+    case "bread-bottom":
+      return <div className="BreadBottom"></div>;
     case "bread-top":
       return (
         <div className="BreadTop">
@@ -14,20 +16,15 @@ export function Ingredient({ type }: Props) {
           <div className="Seeds2"></div>
         </div>
       );
-
-    case "bread-bottom":
-      return <div className="BreadBottom"></div>;
-
-    case "bacon":
-      return <div className="Bacon"></div>;
-
-    case "cheese":
-      return <div className="Cheese"></div>;
-
     case "meat":
       return <div className="Meat"></div>;
-
+    case "cheese":
+      return <div className="Cheese"></div>;
     case "salad":
       return <div className="Salad"></div>;
+    case "bacon":
+      return <div className="Bacon"></div>;
+    default:
+      break;
   }
 }

src/containers/BurgerBuilder/BurgerBuilder.tsx

 import { BuildControls } from "@/components/BuildControls/BuildControls";
 import { Burger } from "@/components/Burger/Burger";
-import { Ingredients } from "@/interfaces/burger-interface";
+import { IngredientNames, Ingredients } from "@/interfaces/burger-interface";
 import { useState } from "react";
 
 export function BurgerBuilder() {
@@ -10,10 +10,24 @@ export function BurgerBuilder() {
     bacon: 0,
     meat: 0,
   });
+
+  const hadlerLess = (ingKey: IngredientNames) => {
+    setIngredients((prevState) => ({
+      ...prevState,
+      [ingKey]: prevState[ingKey] !== 0 ? prevState[ingKey] - 1 : 0,
+    }));
+  };
+
+  const hadlerMore = (ingKey: IngredientNames) => {
+    setIngredients((prevState) => ({
+      ...prevState,
+      [ingKey]: prevState[ingKey] + 1,
+    }));
+  };
   return (
     <>
       <Burger ingredients={ingredients} />
-      <BuildControls />
+      <BuildControls ingredients={ingredients} hadlerLess={hadlerLess} hadlerMore={hadlerMore} />
     </>
   );
 }