Untitled

import React from 'react';
import './App.css';
import { Routes, Route } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Login from './Components/Login';
import Meals from './Components/Meals';
import Drinks from './Components/Drinks';
import Profile from './Components/Profile';
import DoneRecipes from './Components/Done_Recipes';
import FavoriteRecipes from './Components/Favorite_Recipes';
import Layout from './Components/Layout';
import { RecipeInProgress } from './Components/RecipeInProgress/Index';

function App() {
  return (
    <Routes>
      <Route path="/" element={ <Layout /> }>
        <Route index element={ <Login /> } />
        <Route path="/meals" element={ <Meals /> } />
        <Route path="/meals/:id" element={ <Meals /> } />
        <Route path="/meals/:id/in-progress" element={ <RecipeInProgress /> } />
        <Route path="/drinks" element={ <Drinks /> } />
        <Route path="/drinks/:id" element={ <Drinks /> } />
        <Route path="/drinks/:id/in-progress" element={ <RecipeInProgress /> } />
        <Route path="/profile" element={ <Profile /> } />
        <Route path="/done-recipes" element={ <DoneRecipes /> } />
        <Route path="/favorite-recipes" element={ <FavoriteRecipes /> } />
      </Route>
    </Routes>
    // ---------------------
    // <div className="meals">
    //   <span className="logo">TRYBE!</span>
    //   <object
    //     className="rocksGlass"
    //     type="image/svg+xml"
    //     data={ rockGlass }
    //   >
    //     Glass
    //   </object>
    // </div>
  );
}

export default App;