Merge pull request #5 from tan12082001/Pages

Pages

.eslintrc.json

@@ -12,7 +12,7 @@
       "ecmaVersion": 2018,
       "sourceType": "module"
     },
-    "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"],
+    "extends": ["plugin:react/recommended", "plugin:react-hooks/recommended"],
     "plugins": ["react"],
     "rules": {
       "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],

src/components/Button/TertiaryButton.js

@@ -6,12 +6,25 @@ const TertiaryButton = ({ children }) => <StyledButton>{children}</StyledButton>
 
 const StyledButton = styled.button`
   display: flex;
+  border: 2px solid blue;
   justify-content: center;
   align-items: center;
   text-align: center;
-  border: none;
+  padding: 1rem 7rem;
+  border-radius: 2rem;
   background-color: transparent;
+  color: blue; /* Set the default text color */
   cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+
+  & >.grey{
+    color: white;
+  }
+
+  &:hover {
+    background-color: grey;
+    color: white;
+  }
 `;
 
 TertiaryButton.propTypes = {

src/components/Img/Img.js

@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import React from 'react';
 
-const Img = ({ src, alt, className }) => <Imgg className={className} loading="lazy" src={src} alt={alt} decoding="async" />;
+const Img = ({ src, alt, className }) => {
+return <Imgg className={className} loading="lazy" src={src} alt={alt} decoding="async" />;
+}
 
 const Imgg = styled.img`
 width: 100%;

src/components/Link/Link.js

@@ -16,6 +16,7 @@ export const InternalNavLink = styled(RouterLink)`
 
 export const ButtonLink = styled(RouterLink)`
   text-decoration: none;
+  font-size: rem;
   color: grey;
   font-weight: 500;
 `;

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 = () => (
-  <>
-    <Header />
-    <main>
-      <Outlet />
-    </main>
-    <Footer />
-  </>
-);
+const LandingPageLayout = () => {
+  // eslint-disable-next-line arrow-body-style
+  return (
+    <>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+      {/* <Footer /> */}
+    </>
+  );
+};
 
 export default LandingPageLayout;

src/layout/LandingPage/header/Header.js

@@ -9,31 +9,30 @@ import AuthNav from '../nav/AuthNav';
 const Header = () => (
   <StyledHeader>
     <NavContainer>
-      <Nav />
-      <AuthNav />
+      {/* <Nav /> */}
+      {/* <AuthNav /> */}
     </NavContainer>
   </StyledHeader>
 );
 
 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;

src/layout/LandingPage/nav/AuthNav.js

@@ -13,15 +13,22 @@ const AuthNav = () => (
     </ButtonLink>
 
     <ButtonLink to={`${ACCOUNT}/${SIGNUP}`}>
-      <TertiaryButton>Sign Up</TertiaryButton>
+      <TertiaryButton className="grey">Sign Up</TertiaryButton>
     </ButtonLink>
   </Container>
 );
 
 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;

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;

src/layout/UsersDashboard/UsersDashboardLayout.js

@@ -0,0 +1,46 @@
+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 (
+    <Container>
+      <Nav />
+      <Section>
+        <MainContent>
+          <Outlet />
+        </MainContent>
+      </Section>
+    </Container>
+  );
+};
+
+export default UsersDashboardLayout;
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: 18rem auto;
+  height: 100vh;
+  width: 100vw;
+  /* border: 2px solid red; */
+  overflow: scroll;
+  background-color: #FFD700;
+`;
+
+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;
+`;

src/layout/UsersDashboard/sideNav/Nav.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+import styled from "@emotion/styled";
+
+import navConfig from "./navConfig";
+import { NavBoxItem } from "../../../components/Link/Link";
+
+const Nav = () => {
+  return (
+    <Container>
+      <NavbtnSection>
+        {navConfig.map((nav) => (
+          <NavBoxItem path={nav.path} key={nav.title}>
+            {nav.title}
+          </NavBoxItem>
+        ))}
+      </NavbtnSection>
+      <LogoutBtn>
+        <NavBoxItem path={'/account/signin'}>
+          Logout
+        </NavBoxItem>
+      </LogoutBtn>
+    </Container>
+  )
+}
+
+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;
+  gap: 3.8rem;
+//   position: fixed;
+  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;
+`;
+

src/layout/UsersDashboard/sideNav/navConfig.js

@@ -0,0 +1,48 @@
+import {
+  RESERVED_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: 'Reserved Cars',
+    path: RESERVED_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;

src/pages/LandingPage/AddNewCar/AddNewCar.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AddNewCar = () => <p>Add New Car</p>;
+
+export default AddNewCar;

src/pages/LandingPage/Contact/Contact.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Contact = () => <p>Contact</p>;
+
+export default Contact;

src/pages/LandingPage/DeleteReservation/DeleteReservation.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DeleteReservation = () => <p>Delete Reservation</p>;
+
+export default DeleteReservation;

src/pages/LandingPage/Home/Home.js

@@ -1,5 +1,48 @@
 import React from 'react';
+import styled from '@emotion/styled';
+import Img from '../../../components/Img/Img';
+import AuthNav from '../../../layout/LandingPage/nav/AuthNav';
 
-const Home = () => <p> Home Page </p>;
+const Home = () => (
+  <Container>
+    <BigText>
+      <Image>
+        <Img src="/static/img/bicycle.jpg" alt='Bicycle'/>
+      </Image>
+      <Paragraph>THE NEW VESPA TRIDENT</Paragraph>
+      <Auth>
+        <AuthNav />
+      </Auth>
+    </BigText>
+  </Container>
+)
 
 export default Home;
+
+const Container = styled.div`
+  background-color: #FFD700;
+  border: 1px solid #FFD700;
+`;
+
+const BigText = styled.div`
+  margin-left: 30rem;
+  margin-top: 20rem;
+  margin-bottom: 3rem;
+`;
+
+const Paragraph = styled.p`
+  font-size: 3rem;
+  margin-top: -3rem;
+`;
+
+const Image = styled.div`
+  width: 50%;
+`;
+
+const Auth = styled.div`
+  margin-top: 1rem;
+  margin-left: -29rem;
+  margin-bottom: 7.2rem;
+  border: 1px solid #FFD700;
+  padding-left: -20rem;
+`;