tidy up

frontend/src/pages/About.tsx

@@ -0,0 +1,13 @@
+function About() {
+
+  return (
+    <div className="about page-outer">
+      <div>
+        Hello World
+      </div>
+    </div>
+  )
+
+}
+
+export default About

frontend/src/pages/AddRecipe.tsx

@@ -43,7 +43,7 @@ function AddRecipe() {
   }, [newRecipeId, navigate]);
 
   return (
-    <div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
+    <div className="add-recipe-card page-outer">
       <form onSubmit={addRecipeForm} className="add-recipe-form">
         <input
           type="text"

frontend/src/pages/Cookbook.tsx

@@ -1,58 +0,0 @@
-import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
-import { useState, useEffect } from "react";
-import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
-import { type Recipe } from "../types/Recipe"
-
-function Cookbook() {
-  const [recipes, setRecipes] = useState([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [shouldFetchRecipes, setShouldFetchRecipes] = useState(true);
-
-  useEffect(() => {
-    const loadRecipes = async () => {
-      try {
-        const recipes = await getRecipes();
-        setRecipes(recipes);
-      } catch (error) {
-        console.log(error);
-        setError("Failed to load recipes...");
-      } finally {
-        setLoading(false);
-      }
-    };
-    if (shouldFetchRecipes) {
-      loadRecipes().then(() => setShouldFetchRecipes(false));
-    }
-  }, [shouldFetchRecipes]);
-
-  const handleDelete = async (id: number | void) => {
-    try {
-      await deleteRecipe(id);
-      setShouldFetchRecipes(true);
-    } catch (error) {
-      console.error("Error deleting recipe:", error);
-    }
-  };
-
-
-  return (
-    <div className="home">
-      {error && <div className="error-message">{error}</div>}
-      {loading ? (
-        <div className="loading">Loading...</div>
-      ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
-          <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
-          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {recipes.map((recipe) => (
-              <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Cookbook;

frontend/src/pages/Index.tsx

@@ -5,7 +5,7 @@ import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
 
 
 
-function Search() {
+function AllRecipes() {
   const [searchQuery, setSearchQuery] = useState("");
   const [recipes, setRecipes] = useState([]);
   const [cuisines, setCuisines] = useState([]);
@@ -47,10 +47,11 @@ function Search() {
 
   return (
     <div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
+      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
       <div className="cuisines-buttons flex flex-wrap justify-center">
         <input
           type="text"
-          placeholder="name"
+          placeholder="search"
           className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
@@ -81,4 +82,4 @@ function Search() {
   );
 }
 
-export default Search
+export default AllRecipes

frontend/src/pages/RecipePage.tsx

@@ -30,7 +30,7 @@ function RecipePage() {
   }, [id]);
   console.log(recipe)
   return (
-    <div className="recipe">
+    <div className="recipe page-outer">
 
       {error && <div className="error-message">{error}</div>}
 
@@ -38,7 +38,7 @@ function RecipePage() {
         <div className="loading">Loading...</div>
       ) : (
 
-        <div className="recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
+        <div className="recipe-card">
           <div className="border-b-2 border-amber-300 pb-4 mb-6">
             <h3 className="text-2xl md:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
             <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>