Burger.tsx 874 Bytes
import { ReactNode, useState } from 'react';
import { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
import Ingredient from './Ingredient/Ingredient';
import './Burger.css';

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}/>
            )
        }
    })

    return (
        <div className='Burger'>
            <Ingredient type={'bread-top'}/>
            {ingList}
            <Ingredient type={'bread-bottom'}/>
        </div>
    );
}

export default Burger;