styling

frontend/src/components/AddBulkIngredients.tsx

@@ -59,13 +59,13 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
     <div>
       <p>Please enter ingredients: Quantity, Unit, Name</p>
       <textarea
-        rows={4}
-        cols={50}
+        rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         placeholder="Enter ingredients separated by newline..."
+        className="mb-4 p-2 border border-gray-300 rounded w-full"
       />
     </div>
   );

frontend/src/components/AddBulkSteps.tsx

@@ -45,13 +45,13 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
     <div>
       <p>Please enter each step on a new line</p>
       <textarea
-        rows={4}
-        cols={50}
+        rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        placeholder="Enter ingredients separated by newline..."
+        placeholder="Enter steps separated by newline..."
+        className="mb-4 p-2 border border-gray-300 rounded w-full"
       />
     </div>
   );

frontend/src/components/CookbookRecipeTile.tsx

@@ -19,12 +19,15 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
 
 
   return (
-    <div className="recipe-card">
-      <div className="recipe-info">
-        <h3><a href={`/recipe/${recipe.id}`}>{recipe.name}</a></h3>
-        <button onClick={openModal}>Delete Recipe</button>
+    <div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
+      <div className="flex justify-between items-center recipe-name">
+        <h3 className="font-bold"><a href={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</a></h3>
+        <button onClick={openModal} className="text-red-500 focus:outline-none">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
       </div>
-
       <Modal
         isOpen={isModalOpen}
         onClose={closeModal}
@@ -34,6 +37,6 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
       />
     </div>
   );
-}
+};
 
 export default CookbookRecipeTile;

frontend/src/components/NavBar.tsx

@@ -1,19 +0,0 @@
-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/RecipeBookTabs.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+const RecipeBookTabs = () => {
+  const location = useLocation();
+
+  const tabs = [
+    { id: '/', label: 'All Recipes', icon: '📚' },
+    { id: '/recipe/', label: 'Recipe', icon: '🥗' },
+    { id: '/search', label: 'Search', icon: '🔎' },
+    { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
+    { id: '/about', label: 'About', icon: '🍽️' },
+  ];
+
+  return (
+    <div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
+      {/* Navigation Tabs */}
+      <div className="relative h-full">
+        {/* Tab Background Line */}
+        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
+
+        {/* Tabs Container */}
+        <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
+          {tabs.map((tab) => {
+            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
+
+            return (
+              <Link
+                key={tab.id}
+                to={tab.id}
+                className={`
+                  relative px-6 py-3 rounded-t-lg font-medium text-sm transform
+                  ${isActive
+                    ? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
+                    : 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
+                  }
+                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
+                  ${isActive ? '' : ''}
+                `}
+              >
+                <div className="flex items-center space-x-2">
+                  <span className="text-lg">{tab.icon}</span>
+                  <span>{tab.label}</span>
+                </div>
+
+                {/* Tab Shadow Effect */}
+                {isActive && (
+                  <>
+                    <div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
+                      <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
+                    </div>
+                    <div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
+                      <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
+                    </div>
+                  </>
+                )}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecipeBookTabs;

frontend/src/components/RecipeCard.tsx

@@ -1,26 +0,0 @@
-import { type Recipe, type Ingredient } from "../types/Recipe"
-
-function RecipeCard({ recipe }: { recipe: Recipe }) {
-  return (
-    <div className="recipe-card">
-      <div className="recipe-info">
-        <h3>{recipe.details.name}</h3>
-        <p>{recipe.details.cuisine}</p>
-        <h4>Ingredients:</h4>
-        <ul>
-          {recipe.ingredients.map((ingredient: Ingredient, index) => (
-            <li key={index}>{ingredient.quantity} {ingredient.unit} {ingredient.name}</li>
-          ))}
-        </ul>
-        <h4>Steps:</h4>
-        <ol>
-          {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
-            <li key={stepNumber}>{recipe.steps?.[parseInt(stepNumber)]}</li>
-          ))}
-        </ol>
-      </div>
-    </div>
-  );
-}
-
-export default RecipeCard;

frontend/src/components/RecipesContainer.tsx

@@ -0,0 +1,23 @@
+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 RecipesContainer({ recipes }) => {
+
+  return (
+    <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>
+
+  )
+}
+
+return default RecipesContainer