recipe author and stars and a bit of cleanup

frontend/src/pages/RecipeIngredients.tsx

@@ -0,0 +1,48 @@
+import { getRecipeIngredients } from "../services/frontendApi.js";
+import { useState, useEffect } from "react";
+import { type Ingredient } from "../types/Recipe.ts"
+
+function RecipeIngredients() {
+
+  const [recipeIngredients, setRecipeIngredients] = useState<Ingredient[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadRecipeIngredients = async () => {
+      try {
+        const recipeIngredients = await getRecipeIngredients();
+        setRecipeIngredients(recipeIngredients);
+        console.log(recipeIngredients)
+      } catch (err) {
+        console.log(err);
+        setError("Failed to load recipe ingredients...");
+        console.log(error)
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadRecipeIngredients();
+  }, []);
+  console.log(recipeIngredients)
+  return (
+    // should this be a string[]? only if we are only returning raw. otherwise i will need to type and return the ingredient object. This template shoudl work for steps though, so maybe setting that up is a good first step
+    <div className='page-outer'>
+      {loading ? (
+        <div className="loading">Loading...</div>
+      ) : (
+        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+            {recipeIngredients.map(ing => (
+              <li key={ing.id}>
+                {ing.raw}
+              </li>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+
+}
+export default RecipeIngredients