From 5e88ee4b94d161852e3317f1b05a09edba6003b1 Mon Sep 17 00:00:00 2001 From: Toyyib Date: Fri, 8 Dec 2023 06:43:54 +0100 Subject: [PATCH] Display Item Page and Each Item upon click --- src/components/Button/TertiaryButton.js | 5 +- src/components/Card/DisplayCartCard.js | 81 +++++++++ src/components/Card/DisplayItemCard.js | 167 ++++++++++++++++++ src/components/Link/Link.js | 3 +- .../img => src/components/asset}/bicycle.jpg | Bin src/components/asset/bike.jpg | Bin 0 -> 23698 bytes .../UsersDashboard/UsersDashboardLayout.js | 3 +- src/layout/UsersDashboard/sideNav/Nav.js | 3 +- src/pages/LandingPage/Home/Home.js | 43 ++--- src/pages/UserDashboard/DashboardHome.js | 108 ++++++++++- .../UserDashboard/ItemDetail/ItemDetail.js | 15 ++ src/routes/routeConstants.js | 2 +- src/routes/routes.js | 3 + 13 files changed, 394 insertions(+), 39 deletions(-) create mode 100644 src/components/Card/DisplayCartCard.js create mode 100644 src/components/Card/DisplayItemCard.js rename {public/img => src/components/asset}/bicycle.jpg (100%) create mode 100644 src/components/asset/bike.jpg create mode 100644 src/pages/UserDashboard/ItemDetail/ItemDetail.js diff --git a/src/components/Button/TertiaryButton.js b/src/components/Button/TertiaryButton.js index bc09b69..d1bd8f6 100644 --- a/src/components/Button/TertiaryButton.js +++ b/src/components/Button/TertiaryButton.js @@ -6,14 +6,15 @@ const TertiaryButton = ({ children }) => {children} const StyledButton = styled.button` display: flex; - border: 2px solid blue; + border: 2px solid black; justify-content: center; align-items: center; text-align: center; padding: 1rem 7rem; border-radius: 2rem; + font-size: 1.5rem; background-color: transparent; - color: blue; /* Set the default text color */ + color: black; /* Set the default text color */ cursor: pointer; transition: background-color 0.3s, color 0.3s; diff --git a/src/components/Card/DisplayCartCard.js b/src/components/Card/DisplayCartCard.js new file mode 100644 index 0000000..ba685c7 --- /dev/null +++ b/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 }) => ( + + {name} + + {name} + {shortNote} + + + + + + + + + + + + + +); + +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; diff --git a/src/components/Card/DisplayItemCard.js b/src/components/Card/DisplayItemCard.js new file mode 100644 index 0000000..e2563b3 --- /dev/null +++ b/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 ( + + + + + + + + + {name} + + {description} + + + + Finance Fee + {amount} + + + Opton to purchase fee + {amount} + + + Total amount payable + {amount} + + + Duration + {amount} + +
+ + 5.9% APR Representative + + + DISCOVER MORE MODEL + + + + + + Configure + + + + + + +)}; + +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; diff --git a/src/components/Link/Link.js b/src/components/Link/Link.js index 7eea1fa..ca46a2c 100644 --- a/src/components/Link/Link.js +++ b/src/components/Link/Link.js @@ -21,12 +21,11 @@ export const ButtonLink = styled(RouterLink)` font-weight: 500; `; -export const NavBoxItem = ({ icon, path, children }) => ( +export const NavBoxItem = ({ path, children }) => ( (navData.isActive ? 'active' : '')} to={path} > - {icon} {children} ); diff --git a/public/img/bicycle.jpg b/src/components/asset/bicycle.jpg similarity index 100% rename from public/img/bicycle.jpg rename to src/components/asset/bicycle.jpg diff --git a/src/components/asset/bike.jpg b/src/components/asset/bike.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c4e90c9ddf48a7619abb6cffd62092fbbf019723 GIT binary patch literal 23698 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 P5R$yze+GcP|1 a > div { diff --git a/src/pages/LandingPage/Home/Home.js b/src/pages/LandingPage/Home/Home.js index 25d8e4b..b9b633b 100644 --- a/src/pages/LandingPage/Home/Home.js +++ b/src/pages/LandingPage/Home/Home.js @@ -3,46 +3,41 @@ import styled from '@emotion/styled'; import Img from '../../../components/Img/Img'; import AuthNav from '../../../layout/LandingPage/nav/AuthNav'; +import bicycleImage from '../../../../src/components/asset/bicycle.jpg' + const Home = () => ( - - - Bicycle - - THE NEW VESPA TRIDENT - - - - + + Bicycle + + THE NEW VESPA TRIDENT + + + ) 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; + width: 100%; `; const Paragraph = styled.p` font-size: 3rem; - margin-top: -3rem; + margin-top: -40rem; + margin-left: 25rem; + color: green; `; const Image = styled.div` - width: 50%; + // width: 100%; + + img { + width: 100%; + } `; const Auth = styled.div` - margin-top: 1rem; - margin-left: -29rem; - margin-bottom: 7.2rem; - border: 1px solid #FFD700; - padding-left: -20rem; + margin-left: -10rem; `; diff --git a/src/pages/UserDashboard/DashboardHome.js b/src/pages/UserDashboard/DashboardHome.js index 8d14663..a86c37b 100644 --- a/src/pages/UserDashboard/DashboardHome.js +++ b/src/pages/UserDashboard/DashboardHome.js @@ -1,21 +1,117 @@ -import React from 'react'; +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 ( - Hello + + <h2>LATEST MODELS</h2> + <p>Please select a Vespa Model</p> + + + + + + + {DummyCards.slice(currentIndex, currentIndex + 3).map((data, index) => ( + + ))} + + + + + ); }; export default DashboardHome; -const Container = styled.section` - /* border: 2px solid green; */ +const Inner = styled.section` + display: flex; + margin-top: 2rem; + // margin-left: 2rem; +`; + +const Container = styled.div` display: flex; flex-direction: column; -// margin-left: 15rem; -// gap: 2rem; + 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( + + ) +} + +export default ItemDetail; diff --git a/src/routes/routeConstants.js b/src/routes/routeConstants.js index 782f272..0fe389d 100644 --- a/src/routes/routeConstants.js +++ b/src/routes/routeConstants.js @@ -12,7 +12,7 @@ export const ADD_NEW_CAR = 'add-new-car'; export const DELETE_RESERVATION = 'delete-reservation'; export const CONTACT = 'contact' export const ITEMS = 'cars'; -export const ITEMS_DETAILS = 'item-detals'; +export const ITEM_DETAIL = '/u/dashboard/item-details'; export const USERDASHBOARDHOME = 'home'; export const USERS_DASHBOARD = '/u/dashboard'; diff --git a/src/routes/routes.js b/src/routes/routes.js index c9a0b76..85cb409 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -8,6 +8,7 @@ import SignUp from '../pages/Auth/SignUp/SignUp'; import NotFound404 from '../pages/NotFound404'; import MyReservations from '../pages/LandingPage/MyReservation/MyReservation'; import Reserved from '../pages/LandingPage/ReservedCars/MyReservation'; +import ItemDetail from '../pages/UserDashboard/ItemDetail/ItemDetail'; import Home from '../pages/LandingPage/Home/Home'; import { ACCOUNT, @@ -21,6 +22,7 @@ import { USERS_DASHBOARD, ADD_NEW_CAR, DELETE_RESERVATION, + ITEM_DETAIL, CONTACT, NOTFOUND, } from './routeConstants'; @@ -49,6 +51,7 @@ export default function Router() { { path: MY_RESERVATIONS, element: }, { path: RESERVED_CARS, element: }, { path: ADD_NEW_CAR, element: }, + { path: ITEM_DETAIL, element: }, { path: DELETE_RESERVATION, element: }, { path: CONTACT, element: },