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;
-
Нұрасыл Қайратұлы authoredeabf3027