fix

package-lock.json

@@ -12,6 +12,7 @@
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
+        "@types/node": "^22.10.1",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
         "@vitejs/plugin-react": "^3.1.0",
@@ -774,6 +775,16 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@types/node": {
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1329,6 +1340,13 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -1868,6 +1886,15 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@types/node": {
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+      "dev": true,
+      "requires": {
+        "undici-types": "~6.20.0"
+      }
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2258,6 +2285,12 @@
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
+    "undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true
+    },
     "update-browserslist-db": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@types/node": "^22.10.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",

src/App.tsx

-import React from 'react';
+import BurgerBuilder from '@/containers/BurgerBuilder/BurgerBuilder';
 
 function App() {
-  return null;
+  return <BurgerBuilder/>;
 }
 
 export default App

src/components/BuildControls/BuildControl/BuildControl.css

@@ -33,6 +33,7 @@
     padding: 10px;
     font-weight: bold;
     width: 80px;
+    text-transform: capitalize;
 }
 
 .BuildControl .Less {

src/components/BuildControls/BuildControl/BuildControl.tsx

-import React from 'react';
+import { IngredientNames } from '@/interfaces/Ingredients';
 import './BuildControl.css';
 
-interface Props {}
+interface Props {
+    type: IngredientNames
+    lessHandler: VoidFunction
+    moreHandler: VoidFunction
+}
 
-const BuildControl = (props: Props) => {
-    return null;
+const BuildControl = ({type, moreHandler, lessHandler}: Props) => {
+    return (
+        <div className="BuildControl">
+            <div className="Label">{type}</div>
+            <button className="Less" onClick={lessHandler}>Less</button>
+            <button className="More" onClick={moreHandler}>More</button>
+        </div>
+    );
 }
 
 export default BuildControl;

src/components/BuildControls/BuildControls.tsx

-import React from 'react';
+import { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
+import BuildControl from './BuildControl/BuildControl';
 import './BuildControls.css';
 
-interface Props {}
+interface Props {
+    ingredients: Ingredients
+    price: number
+    lessHandler: (ingKey: IngredientNames) => void
+    moreHandler: (ingKey: IngredientNames) => void
+}
+
+const BuildControls = ({ingredients, price, lessHandler, moreHandler}: Props) => {
+    const ingKeys = Object.keys(ingredients)
+
+    return (
+        <div className='BuildControls'>
+            <p>Current Price: <strong>{price} ₸</strong></p>
 
-const BuildControls = (props: Props) => {
-    return null;
+            {
+                ingKeys.map((ingKey, index) => (
+                    <BuildControl 
+                        key={ingKey + index} 
+                        type={ingKey as IngredientNames}
+                        moreHandler={() => moreHandler(ingKey as IngredientNames)}
+                        lessHandler={() => lessHandler(ingKey as IngredientNames)}
+                    />
+                ))
+            }
+        </div>
+    );
 }
 
 export default BuildControls;

src/components/Burger/Burger.tsx

-import React from 'react';
+import { ReactNode } from 'react';
+import { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
+import Ingredient from './Ingredient/Ingredient';
 import './Burger.css';
 
-interface Props {}
+interface Props {
+    ingredients: Ingredients
+}
+
+const Burger = ({ingredients}: Props) => {
+    const ingredientKeys = Object.keys(ingredients)
+    
+    let ingList: ReactNode[] = []
+
+    ingredientKeys.forEach(ingKey => {
+        let amount = ingredients[ingKey as IngredientNames]
+        
+        for(let i = 0; i < amount; i++) {
+            ingList.push(
+                <Ingredient key={ingKey + 1} type={ingKey as IngredientNames}/>
+            )
+        }
+    })
 
-const Burger = (props: Props) => {
-    return null;
+    return (
+        <div className='Burger'>
+            <Ingredient type={'bread-top'}/>
+            {ingList}
+            <Ingredient type={'bread-bottom'}/>
+        </div>
+    );
 }
 
 export default Burger;

src/components/Burger/Ingredient/Ingredient.css

@@ -104,7 +104,7 @@
     border-radius: 20px;
 }
 
-.Bacon {
+.Chicken {
     width: 80%;
     height: 3%;
     background: linear-gradient(#bf3813, #c45e38);

src/components/Burger/Ingredient/Ingredient.tsx

-import React from 'react';
+import { IngredientNames } from '@/interfaces/Ingredients';
 import './Ingredient.css';
 
-interface Props {}
+interface Props {
+    type: 'bread-bottom' | 'bread-top' | IngredientNames
+}
 
-const Ingredient = (props: Props) => {
+const Ingredient = ({type}: Props) => {
+    switch (type) {
+        case 'bread-bottom':
+          return <div className="BreadBottom" />;
+        case 'bread-top':
+          return (
+            <div className="BreadTop">
+              <div className="Seeds1"/>
+              <div className="Seeds2"/>
+            </div>
+          );
+        case 'meat':
+          return <div className="Meat" />;
+        case 'cheese':
+          return <div className="Cheese" />;
+        case 'salad':
+          return <div className="Salad" />;
+        case 'chicken':
+          return <div className="Chicken" />;
+        default:
           return null;
+      }
 }
 
 export default Ingredient;

src/containers/BurgerBuilder/BurgerBuilder.tsx

-import React from 'react';
+import BuildControls from '@/components/BuildControls/BuildControls';
+import Burger from '@/components/Burger/Burger';
+import { IngredientNames, IngredientPrices, Ingredients } from '@/interfaces/Ingredients';
+import { useState } from 'react';
 
 const BurgerBuilder = () => {
+    const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
+    const [ingredients, setIngredients] = useState<Ingredients>({
+        salad: 0,
+        cheese: 0,
+        chicken: 0,
+        meat: 0
+    })
+
+    const moreHandler = (ingKey: IngredientNames) => {
+        const oldCount = ingredients[ingKey];
+        const updatedCount = oldCount + 1;
+        const updatedIngredients = { ...ingredients };
+        updatedIngredients[ingKey] = updatedCount;
+        setIngredients(updatedIngredients);
+
+        const priceAddition = IngredientPrices[ingKey];
+        const newPrice = totalPrice + priceAddition;
+        setTotalPrice(newPrice);
+    }
+
+    const lessHandler = (ingKey: IngredientNames) => {
+        const oldCount = ingredients[ingKey];
+        if (oldCount <= 0) {
+            return;
+        }
+
+        const updatedCount = oldCount - 1;
+        const updatedIngredients = { ...ingredients };
+        updatedIngredients[ingKey] = updatedCount;
+        setIngredients(updatedIngredients);
+
+        const priceAddition = IngredientPrices[ingKey];
+        const newPrice = totalPrice - priceAddition;
+        setTotalPrice(newPrice);
+    }
+
     return (
         <>
-            <div>Burger will be here</div>
-            <div>Build controls will be here</div>
+            <Burger ingredients={ingredients}/>
+            <BuildControls 
+                ingredients={ingredients} 
+                lessHandler={lessHandler}
+                moreHandler={moreHandler}
+                price={totalPrice}
+            />
         </>
     )
 }

src/interfaces/Ingredients.ts

-export type IngredientNames = 'salad' | 'cheese' | 'meat' | 'bacon';
+export type IngredientNames = 'salad' | 'cheese' | 'meat' | 'chicken';
 
 export type Ingredients = {
     [key in IngredientNames]: number;
 }
+
+export enum IngredientPrices {
+    salad = 200,
+    cheese = 400,
+    chicken = 700,
+    meat = 900,
+    bread = 150 
+}
\ No newline at end of file

tsconfig.json

 {
   "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+     "@/*": ["./*"]
+    },
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],

vite.config.ts

 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: [
+      { find: "@", replacement: path.resolve(__dirname, "src") }
+    ],
+  },
   plugins: [react()],
 })