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;