table started, temporarily on home page for testing

ReactFrontEnd/src/Components/Home.jsx

@@ -5,19 +5,21 @@ import Header from './Header'
 import Footer from './Footer'
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import axios from 'axios'
+import UserFavorites from './UserFavorites'
 
 
 function Home() {
 
   return (
     <>
-      <div className="bg-nps-green-300 h-lvh">
+      <div className="bg-nps-green-300 h-full">
         <Header />
         <Slideshow />
         <div className="flex flex-col border border-nps-green-999 rounded-xl my-10 mx-auto p-6 lg:w-1/2">
           <div className="text-center">"Welcome to Park Trippin'!</div>
           <div> Here, you'll effortlessly discover the natural wonders and serene beauty of our country's most cherished landscapes. Whether you seek rugged trails, tranquil lakes, or breathtaking vistas, embark on your next adventure with us. Start exploring, and let the journey to our nation's heart begin!</div>
         </div>
+        <UserFavorites/>
       </div>
 
     </>

ReactFrontEnd/src/Components/Slideshow.jsx

@@ -5,6 +5,7 @@ import { Carousel } from "flowbite-react"
 const PIC_BASE_URL="";
 function Slideshow() {
     const [picList, setPicList] = useState([]);
+
     useEffect(()=>{
         getParkPics();
     },[])

ReactFrontEnd/src/Components/UserFavorites.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react'
+
+//create call to backend here to retrive user favorites 
+//store user favorites into variable, use in initial useState
+
+
+function UserFavorites() {
+
+    const [ userFavs, setUserFavs ] = useState([]);
+
+//whenever a favorite park is deleted, useEffect needs to update the the collection of user's favorite parks and rerender the table of favorites
+    useEffect(() => {
+
+    },[])
+
+    const handleClick = () => {
+        //call to backend to delete park from favorite list
+
+
+    }
+
+    const userFavParks = [];
+
+    userFavParks.map((favPark) => {
+        //insert logic here to retrive park name using park code
+        //store this park name as some variable
+        return (
+            <tr className="ease-in-out duration-300 hover:bg-nps-green-500">
+                {/* insert literal for park name on line below */}
+                <td className="border border-nps-green-900 px-6 py-2">Sample Park Name</td>
+                <td className="border border-nps-green-900 px-6 py-2"><button className="bg-red-600" onClick={handleClick}>Delete</button></td>
+            </tr>
+        )
+    })
+
+
+  return (
+    <>      
+        <div className="flex justify-center">
+            <table className="table-auto border-collapse border-2 border-nps-green-900">
+                <caption>Your Favorite Parks</caption>
+                <tbody>
+                   <tr className="bg-nps-green-700">
+                    <th className="border border-nps-green-900 px-6 py-2" >Park Name</th> 
+                    <th className="border border-nps-green-900 px-6 py-2">Edit</th>
+                </tr>
+                <tr className="ease-in-out duration-300 hover:bg-nps-green-500">
+                    <td className="border border-nps-green-900 px-6 py-2">Sample Park Name</td>
+                    <td className="border border-nps-green-900 px-6 py-2"><button className="bg-red-600" onClick={handleClick}>Delete</button></td>
+                </tr>
+                <tr className="ease-in-out duration-300 hover:bg-nps-green-500">
+                    <td className="border border-nps-green-900 px-6 py-2">Sample Park Name 2</td>
+                    <td className="border border-nps-green-900 px-6 py-2"><button className="bg-red-600" onClick={handleClick}>Delete</button></td>
+                </tr>
+                <tr className="ease-in-out duration-300 hover:bg-nps-green-500">
+                    <td className="border border-nps-green-900 px-6 py-2">Sample Park Name 3</td>
+                    <td className="border border-nps-green-900 px-6 py-2"><button className="bg-red-600" onClick={handleClick}>Delete</button></td>
+                </tr> 
+                </tbody> 
+
+            </table>
+        </div>
+    </>
+  )
+}
+
+export default UserFavorites