ingredients and steps on recipe page

frontend/src/components/RecipeCard.tsx

@@ -1,11 +1,23 @@
-import { type Recipe } from "../types/Recipe"
+import { type Recipe, type Ingredient } from "../types/Recipe"
 
 function RecipeCard({ recipe }: { recipe: Recipe }) {
   return (
     <div className="recipe-card">
       <div className="recipe-info">
-        <h3>{recipe.name}</h3>
-        <p>{recipe.cuisine}</p>
+        <h3>{recipe.details.name}</h3>
+        <p>{recipe.details.cuisine}</p>
+        <h4>Ingredients:</h4>
+        <ul>
+          {recipe.ingredients.map((ingredient: Ingredient, index) => (
+            <li key={index}>{ingredient.name} {ingredient.quantity} {ingredient.unit}</li>
+          ))}
+        </ul>
+        <h4>Steps:</h4>
+        <ol>
+          {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
+            <li key={stepNumber}>{recipe.steps?.[parseInt(stepNumber)]}</li>
+          ))}
+        </ol>
       </div>
     </div>
   );