Display Ingredient Details with Flavour Pairing Suggestions

[ndrbn0]

Ingredient Details with Flavour Pairing

As a user, I want to view detailed information about an ingredient, including its flavour profiles and suggested flavour pairings, so that I can better understand its culinary uses.

Description

Acceptance criteria

• Display the ingredient name prominently at the top of the details section.
• Show all associated flavour profiles with descriptions and intensities.
• Provide a few flavour pairing suggestions based on the ingredient's profiles.
• Include a navigation option to return to the ingredient list or previous page.

Tasks

1. Create IngredientDetails Component
   • Import necessary React components and utilities.
   • Develop a React component named IngredientDetails.
2. Integrate Ingredient Data
   • Modify the parent component (e.g., App) to pass ingredient data as props to IngredientDetails.
   • Ensure proper data formatting and validation before passing to the component.
3. Display Ingredient Name
   • Display the ingredient's name prominently at the top of the details section.
4. Implement Flavour Pairing Suggestions
   • Display at least three flavour pairing suggestions based on the ingredient's flavour profiles.
   • Map over the suggestedPairings array received as a prop.
   • For each pairing, display the paired ingredient (ingredient) and a brief rationale (reason) for its compatibility.

[NikRoe]

Hi there,

nicely done and approved ✅