-
-
-
-
-);
+const LandingPageLayout = () => {
+ // eslint-disable-next-line arrow-body-style
+ return (
+ <>
+
+
+ {/* */}
+
+ );
+};
export default LandingPageLayout;
diff --git a/src/layout/LandingPage/header/Header.js b/src/layout/LandingPage/header/Header.js
index cd08b1b..4f3093a 100644
--- a/src/layout/LandingPage/header/Header.js
+++ b/src/layout/LandingPage/header/Header.js
@@ -9,31 +9,30 @@ import AuthNav from '../nav/AuthNav';
const Header = () => (
-
-
);
const StyledHeader = styled.header`
display: flex;
- padding: 2.17rem 7.12rem;
justify-content: space-between;
align-items: center;
- background-color: white;
- position: fixed;
- top: -1rem;
+ background-color: #FFD700;
gap: 5rem;
width: 100%;
`;
const NavContainer = styled.header`
display: flex;
+ width: 100%;
+ // border: 1px solid blue;
justify-content: space-between;
align-items: center;
- gap: 14rem;
- right: 8rem;
- background-color: white;
+ // gap: 14rem;
+ // right: 8rem;
+ background-color: 3FFD700;
`;
export default Header;
diff --git a/src/layout/LandingPage/nav/AuthNav.js b/src/layout/LandingPage/nav/AuthNav.js
index 7f13a9d..35d4eda 100644
--- a/src/layout/LandingPage/nav/AuthNav.js
+++ b/src/layout/LandingPage/nav/AuthNav.js
@@ -13,15 +13,22 @@ const AuthNav = () => (
- Sign Up
+ Sign Up
);
const Container = styled.div`
- /* border: 2px solid green; */
+ // border: 2px solid green;
display: flex;
gap: 2rem;
+ margin-top: 5rem;
+ margin-bottom: 5rem;
+ margin-left: 2rem;
+ // padding-left: -2rem;
+ padding-right: -5rem;
+ justify-content: center;
+ // margin-left: 8rem;
`;
export default AuthNav;
diff --git a/src/layout/LandingPage/nav/Nav.js b/src/layout/LandingPage/nav/Nav.js
index e091fa9..a7855e7 100644
--- a/src/layout/LandingPage/nav/Nav.js
+++ b/src/layout/LandingPage/nav/Nav.js
@@ -16,7 +16,7 @@ const Nav = () => (
);
const StyledNav = styled.div`
- /* border: 2px solid blue; */
+ // border: 2px solid blue;
display: flex;
gap: 2rem;
font-weight: 400;
diff --git a/src/layout/UsersDashboard/UsersDashboardLayout.js b/src/layout/UsersDashboard/UsersDashboardLayout.js
new file mode 100644
index 0000000..c9f4bbb
--- /dev/null
+++ b/src/layout/UsersDashboard/UsersDashboardLayout.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import styled from '@emotion/styled';
+
+import Nav from './sideNav/Nav';
+
+const UsersDashboardLayout = () => {
+ const location = useLocation();
+ const { pathname } = location;
+ const splitLocation = pathname.split('/');
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default UsersDashboardLayout;
+
+const Container = styled.div`
+ display: grid;
+ grid-template-columns: 18rem auto;
+ height: 100vh;
+ width: 100vw;
+ overflow: scroll;
+ background-color: white;
+`;
+
+const Section = styled.section`
+ /* border: 2px solid yellow; */
+ width: 100%;
+`;
+
+const MainContent = styled.main`
+ /* border: 2px solid red; */
+ margin: 2rem 6.25rem 5.69rem 3.38rem;
+ height: fit-content;
+`;
diff --git a/src/layout/UsersDashboard/sideNav/Nav.js b/src/layout/UsersDashboard/sideNav/Nav.js
new file mode 100644
index 0000000..27ee43b
--- /dev/null
+++ b/src/layout/UsersDashboard/sideNav/Nav.js
@@ -0,0 +1,53 @@
+import React from "react";
+
+import styled from "@emotion/styled";
+
+import navConfig from "./navConfig";
+import { NavBoxItem } from "../../../components/Link/Link";
+
+const Nav = () => {
+ return (
+
+
+ {navConfig.map((nav) => (
+
+ {nav.title}
+
+ ))}
+
+
+
+ Logout
+
+
+
+ )
+}
+
+export default Nav;
+
+const Container = styled.nav`
+ /* border: 2px solid blue; */
+ padding: 2.69rem 2rem 3.75rem 2rem;
+ display: flex;
+ background-color: white;
+ flex-direction: column;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+ gap: 3.8rem;
+ top: 0;
+
+ & > a > div {
+ margin-left: 1rem;
+ }
+`;
+
+const NavbtnSection = styled.section`
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+`;
+
+const LogoutBtn = styled.div`
+ margin-top: auto;
+`;
+
diff --git a/src/layout/UsersDashboard/sideNav/navConfig.js b/src/layout/UsersDashboard/sideNav/navConfig.js
new file mode 100644
index 0000000..e338f1b
--- /dev/null
+++ b/src/layout/UsersDashboard/sideNav/navConfig.js
@@ -0,0 +1,48 @@
+import {
+ RESERVE_CARS,
+ MY_RESERVATIONS,
+ USERDASHBOARDHOME,
+ ADD_NEW_CAR,
+ DELETE_RESERVATION,
+ CONTACT
+} from '../../../routes/routeConstants';
+
+const navConfig = [
+ {
+ title: 'Dashboard',
+ path: USERDASHBOARDHOME,
+ // icon: FourCubes(),
+ },
+
+ {
+ title: 'My Reservations',
+ path: MY_RESERVATIONS,
+ // icon: JobsIcon(),
+ },
+
+ {
+ title: 'Reserve Cars',
+ path: RESERVE_CARS,
+ // icon: PlaneIcon(),
+ },
+
+ {
+ title: 'Add New Cars',
+ path: ADD_NEW_CAR,
+ // icon: PlaneIcon(),
+ },
+
+ {
+ title: 'Delete Reservation',
+ path: DELETE_RESERVATION,
+ // icon: PlaneIcon(),
+ },
+
+ {
+ title: 'Contact',
+ path: CONTACT,
+ // icon: PlaneIcon(),
+ },
+];
+
+export default navConfig;
diff --git a/src/pages/LandingPage/AddNewCar/AddNewCar.js b/src/pages/LandingPage/AddNewCar/AddNewCar.js
new file mode 100644
index 0000000..29d134b
--- /dev/null
+++ b/src/pages/LandingPage/AddNewCar/AddNewCar.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AddNewCar = () =>
+
+ 
+
+ CarBooky
+
+
+
+)
export default Home;
+
+const Container = styled.div`
+ width: 100%;
+`;
+
+const Paragraph = styled.p`
+ font-size: 3rem;
+ margin-top: -40rem;
+ margin-left: 25rem;
+ color: green;
+`;
+
+const Image = styled.div`
+ // width: 100%;
+
+ img {
+ width: 100%;
+ }
+`;
+
+const Auth = styled.div`
+ margin-left: -10rem;
+`;
diff --git a/src/pages/LandingPage/ReserveCars/ReserveCars.js b/src/pages/LandingPage/ReserveCars/ReserveCars.js
index 841e6bb..c980859 100644
--- a/src/pages/LandingPage/ReserveCars/ReserveCars.js
+++ b/src/pages/LandingPage/ReserveCars/ReserveCars.js
@@ -2,10 +2,10 @@ import React from 'react';
import ReserveCar from '../../../components/ReserveCars/ReserveCar';
const ReserveCars = () => (
- <>
-
+
+ <h2>LATEST MODELS</h2>
+ <p>Please select a Vehicle</p>
+
+
+
+
+
+ {DummyCards.slice(currentIndex, currentIndex + 3).map((data, index) => (
+
+
+
+
+
+ );
+};
+
+export default DashboardHome;
+
+const Inner = styled.section`
+ display: flex;
+ margin-top: 2rem;
+ // margin-left: 2rem;
+`;
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 90%;
+ margin: 2rem;
+`;
+
+const CardContainer = styled.div`
+ display: flex;
+ gap: 2rem;
+`;
+
+const Arrow = styled.div`
+ font-size: 2rem;
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 1rem;
+ border-radius: 50%;
+ background-color: white;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+`;
+
+const ArrowLeft = styled(Arrow)`
+ left: 19rem;
+`;
+
+const ArrowRight = styled(Arrow)`
+ right: 2rem;
+`;
+
+const Title = styled.div`
+ font-size: 1rem;
+ font-weight: 400;
+ text-align: center;
+`;
diff --git a/src/pages/UserDashboard/ItemDetail/ItemDetail.js b/src/pages/UserDashboard/ItemDetail/ItemDetail.js
new file mode 100644
index 0000000..f2baac7
--- /dev/null
+++ b/src/pages/UserDashboard/ItemDetail/ItemDetail.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import DisplayItemCard from '../../../components/Card/DisplayItemCard';
+
+const ItemDetail = () => {
+ return(
+
Reserve car page can book a car
Book A Car on Hourly bases!
diff --git a/src/components/asset/bicycle.jpg b/src/components/asset/bicycle.jpg new file mode 100644 index 0000000..f936064 Binary files /dev/null and b/src/components/asset/bicycle.jpg differ diff --git a/src/components/asset/bike.jpg b/src/components/asset/bike.jpg new file mode 100644 index 0000000..c4e90c9 Binary files /dev/null and b/src/components/asset/bike.jpg differ diff --git a/src/layout/LandingPage/LandingPageLayout.js b/src/layout/LandingPage/LandingPageLayout.js index 7635e5b..d9c3599 100644 --- a/src/layout/LandingPage/LandingPageLayout.js +++ b/src/layout/LandingPage/LandingPageLayout.js @@ -1,17 +1,20 @@ import React from 'react'; import { Outlet } from 'react-router-dom'; -import Footer from './footer/Footer'; -import Header from './header/Header'; +// import Footer from './footer/Footer'; +import Header from './header/Header'; -const LandingPageLayout = () => ( - <> -Add New Car
; + +export default AddNewCar; diff --git a/src/pages/LandingPage/Contact/Contact.js b/src/pages/LandingPage/Contact/Contact.js new file mode 100644 index 0000000..d10935f --- /dev/null +++ b/src/pages/LandingPage/Contact/Contact.js @@ -0,0 +1,5 @@ +import React from 'react'; + +const Contact = () =>Contact
; + +export default Contact; diff --git a/src/pages/LandingPage/DeleteReservation/DeleteReservation.js b/src/pages/LandingPage/DeleteReservation/DeleteReservation.js new file mode 100644 index 0000000..9be9f07 --- /dev/null +++ b/src/pages/LandingPage/DeleteReservation/DeleteReservation.js @@ -0,0 +1,5 @@ +import React from 'react'; + +const DeleteReservation = () =>Delete Reservation
; + +export default DeleteReservation; diff --git a/src/pages/LandingPage/Home/Home.js b/src/pages/LandingPage/Home/Home.js index 41a1a37..c66aa39 100644 --- a/src/pages/LandingPage/Home/Home.js +++ b/src/pages/LandingPage/Home/Home.js @@ -1,5 +1,43 @@ import React from 'react'; +import styled from '@emotion/styled'; +import Img from '../../../components/Img/Img'; +import AuthNav from '../../../layout/LandingPage/nav/AuthNav'; -const Home = () =>Home Page
; +import bicycleImage from '../../../../src/components/asset/bicycle.jpg' + +const Home = () => ( +Reserve cars page blahh
+
+
);
export default ReserveCars;
diff --git a/src/pages/UserDashboard/DashboardHome.js b/src/pages/UserDashboard/DashboardHome.js
new file mode 100644
index 0000000..e781ef9
--- /dev/null
+++ b/src/pages/UserDashboard/DashboardHome.js
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+
+import styled from '@emotion/styled';
+import DisplayCartCard from '../../components/Card/DisplayCartCard';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+
+const DummyCards = [
+ {
+ imageName: 'bicycle',
+ name: 'Bicycle',
+ shortNote:
+ 'The VESPA C20 is a stunning moped with a modern electronic system and more',
+ },
+ {
+ imageName: 'bicycle',
+ name: 'Bicycle',
+ shortNote:
+ 'The VESPA C20 is a stunning moped with a modern electronic system and more',
+ },
+ {
+ imageName: 'bicycle',
+ name: 'Bicycle',
+ shortNote:
+ 'The VESPA C20 is a stunning moped with a modern electronic system and more',
+ },
+ {
+ imageName: 'bicycle',
+ name: 'Bicycle',
+ shortNote:
+ 'The VESPA C20 is a stunning moped with a modern electronic system and more',
+ },
+];
+
+const DashboardHome = () => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ const handleNext = () => {
+ setCurrentIndex((prevIndex) => (prevIndex + 3) % DummyCards.length);
+ };
+
+ const handlePrev = () => {
+ setCurrentIndex((prevIndex) => (prevIndex - 3 + DummyCards.length) % DummyCards.length);
+ };
+
+ return (
+ Reserve car