Merge branch 'dev' into reserve-item-component

.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,26 @@ const TertiaryButton = ({ children }) => <StyledButton>{children}</StyledButton>
 
 const StyledButton = styled.button`
   display: flex;
+  border: 2px solid black;
   justify-content: center;
   align-items: center;
   text-align: center;
-  border: none;
+  padding: 1rem 7rem;
+  border-radius: 2rem;
+  font-size: 1.5rem;
   background-color: transparent;
+  color: black; /* 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/Card/DisplayCartCard.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+
+const DisplayCartCard = ({ imageName, name, shortNote }) => (
+  <Container to="/u/dashboard/item-details">
+    <Image src={require(`../asset/${imageName}.jpg`).default} alt={name} />
+    <Content>
+      <Name>{name}</Name>
+      <Note>{shortNote}</Note>
+      <Icons>
+        <IconLink href="#" target="_blank">
+          <FaFacebook />
+        </IconLink>
+        <IconLink href="#" target="_blank">
+          <FaTwitter />
+        </IconLink>
+        <IconLink href="#" target="_blank">
+          <FaInstagram />
+        </IconLink>
+      </Icons>
+    </Content>
+  </Container>
+);
+
+DisplayCartCard.propTypes = {
+  imageName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  shortNote: PropTypes.string.isRequired,
+};
+
+const Container = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  width: 300px;
+//   border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: 200px;
+  border: 1px solid blue;
+  border-radius: 50%;
+  margin-top: 1rem;
+  object-fit: cover;
+`;
+
+const Content = styled.div`
+  padding: 16px;
+  align-items: center;
+  text-align: center;
+`;
+
+const Name = styled.h2`
+  font-size: 1.5rem;
+  margin-bottom: 8px;
+`;
+
+const Note = styled.p`
+  font-size: 1rem;
+  margin-bottom: 16px;
+`;
+
+const Icons = styled.div`
+  display: flex;
+  gap: 15px;
+  margin-left: 5rem;
+`;
+
+const IconLink = styled.a`
+  color: #333;
+  font-size: 1.5rem;
+`;
+
+export default DisplayCartCard;

src/components/Card/DisplayItemCard.js

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { FaCog, FaArrowRight, FaSyncAlt } from 'react-icons/fa';
+
+const DisplayItemCard = ({ name, imgSrc, amount, description }) => {
+  const [rotation, setRotation] = useState(0);
+
+  const handleRotate = () => {
+    setRotation((prevRotation) => (prevRotation + 90) % 360);
+  };
+  return (
+    <Container>
+        <Image>
+          <Image1 src={imgSrc} alt={name} rotation={rotation} />
+          <RotateButton onClick={handleRotate}>
+            <FaSyncAlt />
+          </RotateButton>
+        </Image>
+        <Content>
+        <Name>{name}</Name>
+        <Description>
+            {description}
+        </Description>
+        <Table>
+            <TableRow color="#ccc">
+            <TableData>Finance Fee</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+            <TableRow color="#fff">
+            <TableData>Opton to purchase fee</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+            <TableRow color="#ccc">
+            <TableData>Total amount payable</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+            <TableRow color="#fff">
+            <TableData>Duration</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+        </Table>
+        <BoldText>
+            5.9% APR Representative
+        </BoldText>
+        <ColorWheel>
+            DISCOVER MORE MODEL
+        </ColorWheel>
+        <ConfigureButton>
+            <SettingIcon>
+            <FaCog />
+            </SettingIcon>
+            Reserve
+            <ArrowIcon>
+            <FaArrowRight />
+            </ArrowIcon>
+        </ConfigureButton>
+        </Content>
+    </Container>
+)};
+
+DisplayItemCard.propTypes = {
+  name: PropTypes.string.isRequired,
+  amount: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  imgSrc: PropTypes.string.isRequired,
+};
+
+const Container = styled.div`
+//   border: 1px solid #ccc;
+  display: flex;
+  border-radius: 8px;
+  text-align: right;
+//   margin-right: -20rem;
+//   width: 40%;
+  overflow: hidden;
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Image = styled.div`
+  border: 1px solid blue;
+  width: 40rem;
+  margin-right: 2rem;
+  postion: relative;
+`;
+
+const Image1 = styled.img`
+  border: 1px solid blue;
+  width: 40rem;
+  margin-right: 2rem;
+  transform: rotate(${(props) => props.rotation}deg);
+  transition: transform 0.5s ease;
+`;
+
+const RotateButton = styled.button`
+  position: absolute;
+  bottom: 1rem;
+  right: 55rem;
+  background-color: #fff;
+  border: none;
+  border-radius: 50%;
+  padding: 0.5rem;
+  cursor: pointer;
+`;
+
+const Content = styled.div`
+  padding: 4rem 2rem;
+`;
+
+const Name = styled.h2`
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+`;
+
+const Description = styled.p`
+  font-size: 1rem;
+  margin-bottom: 1rem;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  margin-bottom: 2rem;
+  margin-top: 3rem;
+`;
+
+const TableRow = styled.tr`
+  background-color: ${(props) => props.color};
+`;
+
+const TableData = styled.td`
+  padding: 1rem;
+  text-align: center;
+`;
+
+const BoldText = styled.div`
+  font-weight: bolder;
+  margin-bottom: 2rem;
+  margin-right: 10rem;
+`;
+
+const ColorWheel = styled.div`
+  /* Add styles for the color wheel */
+  margin-bottom: 5rem;
+`;
+
+const ConfigureButton = styled.button`
+  background-color: green;
+  color: #fff;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  margin-left: 15rem;
+  border: none;
+  border-radius: 5rem;
+  cursor: pointer;
+`;
+
+const SettingIcon = styled.span`
+  margin-right: 8px;
+`;
+
+const ArrowIcon = styled.span`
+  margin-left: 8px;
+  margin-top: 2px;
+`;
+
+export default DisplayItemCard;

src/components/Form/FormField.js

@@ -32,6 +32,7 @@ export const DateField = ({
 };
 
 DateField.propTypes = {
+  id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   className: PropTypes.string.isRequired,
@@ -72,6 +73,12 @@ SelectField.propTypes = {
   className: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ).isRequired,
 };
 
 export const TextInputField = ({

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,16 +16,16 @@ export const InternalNavLink = styled(RouterLink)`
 
 export const ButtonLink = styled(RouterLink)`
   text-decoration: none;
+  font-size: rem;
   color: grey;
   font-weight: 500;
 `;
 
-export const NavBoxItem = ({ icon, path, children }) => (
+export const NavBoxItem = ({ path, children }) => (
   <NavigationBoxLink
     className={(navData) => (navData.isActive ? 'active' : '')}
     to={path}
   >
-    {icon}
     {children}
   </NavigationBoxLink>
 );

src/components/ReserveCars/ReserveCar.js

@@ -4,7 +4,6 @@ import ReserveCarFrom from './ReserveCarForm';
 const ReserveCar = () => (
   <div className="reserve-car-outer">
     <div className="testing-backdrop">
-      <h1>Reserve car page can book a car</h1>
       <div className="reserve-car-inner">
         <h1 id="reserve-car-head-title">Book A Car on Hourly bases!</h1>
         <div className="blank-div" />

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;