styling

frontend/src/pages/Search.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
+import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
+import { type Recipe } from "../types/Recipe"
+
+
+
+
+function Search() {
+  const [searchQuery, setSearchQuery] = useState("");
+  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="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">
+      <form onSubmit={() => { }} className="add-recipe-form">
+        <input
+          type="text"
+          placeholder="name"
+          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+          submit
+        </button>
+      </form>
+      {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">
+          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+            {recipes.map((recipe) => (
+              recipe.name.toLowerCase().startsWith(searchQuery) && <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Search