A Recipe Card

Time for a project! This checkpoint puts the components, props, lists and conditions of the previous lessons to work. As in the checkpoints of the JavaScript course, the instructions say what the page should do, and how you write it is up to you.

The project. You're building a recipe book. Each recipe gets a card with its name, how long it takes and what goes into it. Over three exercises, you'll make the card, show all the recipes with their ingredients, and finally add badges for vegetarian and quick recipes and split the book into chapters.

The files. The recipes are in recipes.js, in the array recipes, which the file exports. Each recipe looks like this:

{
    id: 1,
    name: "Tomato Soup",
    course: "soup",
    minutes: 15,
    vegetarian: true,
    ingredients: ["tomatoes", "onion", "garlic", "basil"],
}

App.jsx already imports them. RecipeCard.jsx is empty: the component that goes there is all yours to write.

The task. Write the component RecipeCard. It gets a recipe in its props and shows it in an article with the class recipe: the name in an h3 (the h2s will be the chapters of the book, later), and under it, how long the recipe takes and how many ingredients it has:

Tomato Soup
15 minutes
4 ingredients

For now, App shows only the card of the first recipe, recipes[0]. (All of them come in the next exercise.)

A tip: the number of ingredients is the length of the recipe's array ingredients.