Карточка рецепта

Время для проекта! В этом мини-проекте вы примените компоненты, пропсы, списки и условия из прошлых уроков. Как и в мини-проектах курса JavaScript, задание говорит, что должна делать страница, а как это написать — решать вам.

Проект. Вы делаете книгу рецептов. У каждого рецепта своя карточка: название, время приготовления и состав. За три упражнения вы сделаете карточку, покажете все рецепты с ингредиентами и, наконец, добавите значки для вегетарианских и быстрых рецептов и разделите книгу на разделы.

Файлы. Рецепты лежат в recipes.js, в массиве recipes, который файл экспортирует. Каждый рецепт выглядит так:

{
    id: 1,
    name: "Томатный суп",
    course: "soup",
    minutes: 15,
    vegetarian: true,
    ingredients: ["помидоры", "лук", "чеснок", "базилик"],
}

App.jsx уже импортирует их. RecipeCard.jsx пуст: компонент, который должен в нём лежать, вам предстоит написать самим.

Задача. Напишите компонент RecipeCard. Он получает рецепт в пропсах и показывает его в article с классом recipe: название в h3 (h2 позже станут разделами книги), а под ним — время приготовления и число ингредиентов:

Томатный суп
Время: 15 мин
Ингредиентов: 4

Пока App показывает только карточку первого рецепта, recipes[0]. (Все рецепты появятся в следующем упражнении.)

Совет: число ингредиентов — это длина массива ingredients у рецепта.