import "./App.css";
import Index from "./pages/Index.tsx";
import RecipePage from "./pages/RecipePage.tsx";
import AddRecipe from "./pages/AddRecipe.tsx";
import About from "./pages/About.tsx"
import RecipeIngredients from "./pages/RecipeIngredients.tsx"
import RecipeSteps from "./pages/RecipeSteps.tsx"

import RecipeBookTabs from "./components/RecipeBookTabs.tsx";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div className="min-h-screen flex flex-col">
      <RecipeBookTabs />
      <main className="flex-1 overflow-auto">
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="/recipe/:id" element={<RecipePage />} />
          <Route path="/add-recipe" element={<AddRecipe />} />
          <Route path="/about" element={<About />} />
          <Route path="/recipe-ingredients" element={<RecipeIngredients />} />
          <Route path="/recipe-steps" element={<RecipeSteps />} />
        </Routes>
      </main>
    </div>
  );
}
export default App;