initial commit

frontend/src/pages/AddRecipe.tsx

@@ -0,0 +1,39 @@
+import { addRecipe } from "../services/backend.js";
+
+function AddRecipe() {
+  const addRecipeForm = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
+    const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;
+
+    if (nameElement && cuisineElement) {
+
+      const name = nameElement.value;
+      const cuisine = cuisineElement.value;
+      await addRecipe(name, cuisine);
+    }
+
+  }
+  return (
+    <div className="add-recipe-outer">
+      <form onSubmit={addRecipeForm} className="add-recipe-form">
+        <input
+          type="text"
+          placeholder="name"
+          className="ar-name"
+          id="ar-name"
+        />
+        <input
+          type="text"
+          placeholder="cuisine"
+          className="ar-cusine"
+          id="ar-cuisine"
+        />
+        <button type="submit" className="ar-button">
+          submit
+        </button>
+      </form>
+    </div>
+  )
+}
+export default AddRecipe