adding files and updatin path

kero1019 · Jul 7, 2024 · 1228b33 · 1228b33
1 parent eccf911
commit 1228b33
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 53 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Home from "./Components/Home";
 import About from "./Components/About";
 import Vans from "./Components/Vans";
@@ -10,21 +10,29 @@ import Dashboard from "./Components/Host/Dashboard";
 import "./Server";
 import Income from "./Components/Host/Income";
 import HostVans from "./Components/Host/HostVans";
-
+import HostLayout from "./Components/Host/HostLayout";
+import Reviews from "./Components/Host/Reviews";
 function App() {
   return (
     <div className="">
       <BrowserRouter>
         <Routes>
-          <Route element={<Layout />}>
-            <Route path="/VanLife/" element={<Home />} />
-            <Route path="/VanLife/host" element={<Host />} />
-            <Route path="/VanLife/about" element={<About />} />
-            <Route path="VanLife/vans" element={<Vans />} />
-            <Route path="VanLife/dashboard" element={<Dashboard />} />
-            <Route path="VanLife/income" element={<Income />} />
-            <Route path="VanLife/hostVans" element={<HostVans />} />
-            <Route path="VanLife/vanDetails/:id" element={<VanDetails />} />
+          <Route path="/VanLife/" element={<Layout />}>
+            <Route path="" element={<Home />} />
+            <Route path="host" element={<Host />} />
+            <Route path="about" element={<About />} />
+            <Route path="vans" element={<Vans />} />
+            <Route
+              path="vanDetails/:id"
+              element={<VanDetails />}
+            />
+          </Route>
+
+          <Route path="VanLife/host/" element={<HostLayout />}>
+            <Route path="dashboard" element={<Dashboard />} />
+            <Route path="income" element={<Income />} />
+            <Route path="hostVans" element={<HostVans />} />
+            <Route path="reviews" element={<Reviews />} />
           </Route>
         </Routes>
       </BrowserRouter>

diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
@@ -7,7 +7,7 @@ export default function Header() {
         #VANLIFE
       </Link>
       <nav className="flex  gap-5 text-gray-text font-semibold">
-        <Link to="/VanLife/host">Host</Link>
+        <Link to="/VanLife/host/dashboard">Host</Link>
         <Link to="/VanLife/about">About</Link>
         <Link to="/VanLife/vans">Vans</Link>
       </nav>

diff --git a/src/Components/Host/Dashboard.jsx b/src/Components/Host/Dashboard.jsx
@@ -1,9 +1,44 @@
-import React from 'react'
-
+import React from "react";
+import { FaStar } from "react-icons/fa";
+import HostYourListVans from "./HostYourListVans";
 export default function Dashboard() {
   return (
     <div>
-      <h1>welcome in dashboard</h1>
+      <div className="p-10 bg-light-beige">
+        <div className="flex items-center justify-between ">
+          <div className="flex flex-col gap-5">
+            <h1 className="text-[2rem] font-bold">Welcome !</h1>
+            <p className="text-gray-text">
+              income last{" "}
+              <span className="font-semibold underline hover:cursor-pointer">
+                30 days
+              </span>
+            </p>
+            <p className="text-[2.7rem] font-bold">$2,260</p>
+          </div>
+          <p className="font-semibold hover:cursor-pointer">Details</p>
+        </div>
+      </div>
+      <div className="bg-light-orange flex items-center p-10 font-bold text-2xl gap-3">
+        <p>Review Score</p>
+        <FaStar className="text-orange" />
+        <p>
+          5.0/<span className="text-gray-text font-medium">5</span>
+        </p>
+      </div>
+      <div className="bg-main-background pb-10">
+        <div className="flex justify-between  items-center p-10">
+          <p className="font-bold text-2xl">Your listed vans</p>
+          <p className="font-medium hover:font-medium hover:underline hover:cursor-pointer">
+            View all
+          </p>
+        </div>
+        <div className="px-10 flex flex-col gap-4 ">
+          <HostYourListVans />
+          <HostYourListVans />
+          <HostYourListVans />
+        </div>
+      </div>
     </div>
-  )
+  );
 }
diff --git a/src/Components/Host/Host.jsx b/src/Components/Host/Host.jsx
@@ -1,39 +1,10 @@
 import React from "react";
 import HostHeader from "./HostHeader";
-import { FaStar } from "react-icons/fa";
-import HostYourListVans from "./HostYourListVans";
+
 export default function Host() {
   return (
     <div>
       <HostHeader />
-      <div className="p-10 bg-light-beige">
-        <div className="flex items-center justify-between ">
-          <div className="flex flex-col gap-5">
-            <h1 className="text-[2rem] font-bold">Welcome !</h1>
-            <p className="text-gray-text">
-              income last <span className="font-semibold underline hover:cursor-pointer">30 days</span>
-            </p>
-            <p className="text-[2.7rem] font-bold">$2,260</p>
-          </div>
-          <p className="font-semibold hover:cursor-pointer">Details</p>
-        </div>
-      </div>
-      <div className="bg-light-orange flex items-center p-10 font-bold text-2xl gap-3">
-        <p>Review Score</p>
-        <FaStar className="text-orange" />
-        <p>5.0/<span className="text-gray-text font-medium">5</span></p>
-      </div>
-      <div className="bg-main-background pb-10">
-        <div className="flex justify-between  items-center p-10">
-        <p className="font-bold text-2xl">Your listed vans</p>
-        <p className="font-medium hover:font-medium hover:underline hover:cursor-pointer">View all</p>
-        </div>
-        <div className="px-10 flex flex-col gap-4 ">
-          <HostYourListVans />
-          <HostYourListVans />
-          <HostYourListVans />
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/src/Components/Host/HostHeader.jsx b/src/Components/Host/HostHeader.jsx
@@ -1,13 +1,21 @@
 import React from "react";
 import HeaderButton from "../HeaderButton";
-
+import { Link } from "react-router-dom";
 export default function HostHeader() {
   return (
     <div className="flex items-center gap-10 p-5 bg-main-background ">
-      <HeaderButton>Dashboard</HeaderButton>
-      <HeaderButton>Income</HeaderButton>
-      <HeaderButton>Vans</HeaderButton>
-      <HeaderButton>Reviews</HeaderButton>
+      <Link to="/VanLife/host/dashboard">
+        <HeaderButton>Dashboard</HeaderButton>
+      </Link>
+      <Link to="/VanLife/host/income">
+        <HeaderButton>Income</HeaderButton>
+      </Link>
+      <Link to="/VanLife/host/hostVans">
+        <HeaderButton>Vans</HeaderButton>
+      </Link>
+      <Link to="/VanLife/host/reviews">
+        <HeaderButton>Reviews</HeaderButton>
+      </Link>
     </div>
   );
 }
diff --git a/src/Components/Host/HostLayout.jsx b/src/Components/Host/HostLayout.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+import Header from '../Header'
+import Footer from '../Footer'
+import HostHeader from './HostHeader'
+export default function HostLayout() {
+  return (
+    <div>
+      <Header/>
+      <HostHeader />
+      <Outlet />
+      <Footer/>
+    </div>
+  )
+}
diff --git a/src/Components/VanDetails.jsx b/src/Components/VanDetails.jsx
@@ -3,7 +3,6 @@ import { FaArrowLeft } from "react-icons/fa";
 import Button from "./Button";
 import { Link, useParams } from "react-router-dom";
 import OrangeButton from "./OrangeButton";
-import Footer from "./Footer";
 
 export default function VanDetails() {
   const params = useParams();
@@ -16,7 +15,6 @@ export default function VanDetails() {
       .then((data) => setVanData(data.vans));
   }, [params.id]);
 
-// TODO: make the loader spin in the middle of screen not the top
   return (
     <div className="flex-1">
       {van === null ? (