songs index route complete

vite-front-end/src/App.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import NavBar from './components/NavBar.jsx'
 import Home from './pages/Home.jsx'
+import Index from './pages/Index.jsx'
 import './App.css'
 
 function App() {
@@ -13,6 +14,7 @@ function App() {
         <main>
           <Routes>
             <Route path='/' element={<Home />}/>
+            <Route path='/songs' element={<Index />}/>
           </Routes>
         </main>
       </Router>

vite-front-end/src/components/Song.jsx

@@ -0,0 +1,26 @@
+import { Link } from "react-router-dom";
+
+export default function Song({ song }) {
+    return (
+        <tr>
+            <td>
+                {song.is_favorite ? (
+                    <span>⭐️</span>
+                ) : (
+                    <span>&nbsp; &nbsp; &nbsp;</span>
+                )}
+            </td>
+            <td>
+                <Link to={`/songs/${song.id}`}> {song.name}</Link>
+            </td>
+            <td>
+                {song.artist}
+            </td>
+            <td>
+                <span>
+                    {song.time}
+                </span>
+            </td>
+        </tr>
+    )
+}

vite-front-end/src/components/Songs.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import Song from './Song.jsx'
+
+const API = import.meta.env.VITE_API_URL;
+
+export default function Songs() {
+    const [songs, setSongs] = useState([]);
+
+    const fetchSongs = async () => {
+        try {
+            fetch(`${API}/songs`)
+                .then(res => res.json())
+                .then(data => setSongs(data))
+        } catch (err) {
+            return err;
+        }
+    };
+
+    useEffect(() => {
+        fetchSongs()
+    }, [])
+
+    return (
+        <div>
+            <section>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Favorite</th>
+                            <th>Song</th>
+                            <th>Artist</th>
+                            <th>Time</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {songs.map(song => <Song key={song.id} song={song} />)}
+                    </tbody>
+                </table>
+            </section>
+        </div>
+    )
+}

vite-front-end/src/pages/Index.jsx

@@ -0,0 +1,10 @@
+import Songs from '../components/Songs.jsx';
+
+export default function Index() {
+    return(
+        <div>
+            <h2>Index</h2>
+            <Songs />
+        </div>
+    )
+}