initial commit

frontend/src/components/CookbookRecipeTile.tsx

@@ -0,0 +1,25 @@
+import { type Recipe } from "../types/Recipe"
+
+interface CookbookRecipeTileProps {
+  recipe: Recipe;
+  handleDelete: (id: number | undefined) => void;
+}
+
+function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
+  const deleteHandler = () => {
+    if (handleDelete) {
+      handleDelete(recipe.id);
+    }
+  };
+
+  return (
+    <div className="recipe-card">
+      <div className="recipe-info">
+        <h3><a href={`/recipe/${recipe.id}`}>{recipe.name}</a></h3>
+        <button onClick={deleteHandler}>Delete Recipe</button>
+      </div>
+    </div >
+  );
+}
+
+export default CookbookRecipeTile;

frontend/src/components/NavBar.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import "../css/Navbar.css";
+
+function NavBar() {
+  return (
+    <nav className="navbar">
+      <div className="navbar-links">
+        <Link to="/" className="nav-link">
+          Cookbook
+        </Link>
+        <Link to="/add-recipe" className="nav-link">
+          Add Recipe
+        </Link>
+      </div>
+    </nav>
+  );
+}
+
+export default NavBar;

frontend/src/components/RecipeCard.tsx

@@ -0,0 +1,14 @@
+import { type Recipe } 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>
+      </div>
+    </div>
+  );
+}
+
+export default RecipeCard;