App.js

import React from 'react';
import { Link, useRoutes } from 'react-router-dom';
import './App.css';
import CreatePost from './pages/CreatePost';
import EditPost from './pages/EditPost';
import ReadPosts from './pages/ReadPosts';


const App = () => {
  
  const descr = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'

  // const posts = [
  //     {'id':'1', 
  //     'title': 'Cartwheel in Chelsea 🤸🏽‍♀️',
  //     'author':'Harvey Milian', 
  //     'description': descr},
  //     {'id':'2', 
  //     'title': 'Love Lock in Paris 🔒',
  //     'author':'Beauford Delaney', 
  //     'description':descr},
  //     {'id':'3', 
  //     'title': 'Wear Pink on Fridays 🎀',
  //     'author':'Onika Tonya', 
  //     'description':descr},
  //     {'id':'4', 
  //     'title': 'Adopt a Dog 🐶',
  //     'author':'Denise Michelle', 
  //     'description':descr},
  // ]
  const posts = []
 

  // Sets up routes
  let element = useRoutes([
    {
      path: "/",
      element:<ReadPosts data={posts}/>
    },
    {
      path:"/edit/:id",
      element: <EditPost data={posts} />
    },
    {
      path:"/new",
      element: <CreatePost />
    }
  ]);

  return ( 

    <div className="App">

      <div className="header">
        <h1>👍 Bet 1.0</h1>
        <Link to="/"><button className="headerBtn"> Explore Challenges 🔍  </button></Link>
        <Link to="/new"><button className="headerBtn"> Submit Challenge 🏆 </button></Link>
      </div>
        {element}
    </div>

  );
}

export default App;