Cars list

.eslintrc.json

@@ -22,7 +22,8 @@
     "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
-    "no-shadow": "off"
+    "no-shadow": "off",
+    "quotes": "off"
   },
   "overrides": [
     {

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.0",
+    "prop-types": "^15.8.1",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.css

@@ -50,3 +50,22 @@ section.signup > form {
 .form-switch-link {
   color: var(--color-white);
 }
+
+main {
+  display: flex;
+}
+
+.mobmenu {
+  position: fixed;
+  left: 1rem;
+  top: 1rem;
+  width: 30px;
+  z-index: 5;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.mobmenu > img {
+  width: 100%;
+}

src/App.js

@@ -1,9 +1,11 @@
-import './App.css';
-import { Route, Routes } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
-import { isLogIn } from './redux/login/loginSlice';
-import Login from './components/login/login';
+import "./App.css";
+import { Route, Routes } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
+import { isLogIn } from "./redux/login/loginSlice";
+import Login from "./components/login/login";
+import Cars from "./components/car/Cars";
+import NavMenu from "./components/nav/NavMenu";
 
 function App() {
   const loginData = useSelector((state) => state.login);
@@ -13,7 +15,7 @@ function App() {
   }, [dispatch]);
 
   // Checking if the authentication token key exists
-  const authKey = localStorage.getItem('authKey');
+  const authKey = localStorage.getItem("authKey");
   // If authKey does not exist display login page
   if (!authKey) {
     return <Login />;
@@ -26,9 +28,10 @@ function App() {
 
   return (
     <main>
-      <h1>Main Page</h1>
+      <NavMenu />
       <Routes>
         <Route path="/signin" element={<Login />} />
+        <Route path="/" element={<Cars />} />
       </Routes>
     </main>
   );

src/CSS/Car.module.css

@@ -0,0 +1,44 @@
+.car {
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+  align-items: center;
+  text-align: center;
+  width: 350px;
+  height: 450px;
+}
+
+.carImg {
+  width: 100%;
+}
+
+.carDetailsBox {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.carName {
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 1.3rem;
+}
+
+.carDescription {
+  color: #c7c9c8;
+  text-transform: capitalize;
+}
+
+.carSocialBox {
+  width: 50%;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.carSocialBox > img {
+  width: 30px;
+  padding: 5px;
+  border-radius: 50%;
+  border: 1px solid #c7c9c8;
+  cursor: pointer;
+}

src/CSS/Cars.module.css

@@ -0,0 +1,46 @@
+.carsSection {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  overflow-x: hidden;
+  overflow-y: unset;
+}
+
+.titleBox {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
+.titleBox > * {
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.titleBox > h2 {
+  letter-spacing: 11px;
+}
+
+.titleBox > p {
+  color: #c7c9c8;
+  font-size: 0.9rem;
+}
+
+.cars {
+  width: 70%;
+  display: flex;
+  gap: 25px;
+  transition: all 1s;
+}
+
+.dblock {
+  display: block;
+}
+
+.dnone {
+  display: none;
+}

src/CSS/NavMenu.module.css

@@ -0,0 +1,29 @@
+.sidebarMenu {
+  width: 250px;
+  min-height: 100vh;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 75%;
+}
+
+.navigation {
+  margin-top: 10rem;
+}
+
+.navlist {
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  gap: 2rem;
+  font-weight: 700;
+}
+
+a {
+  text-decoration: none;
+  color: rgb(0, 17, 17);
+}

src/CSS/Slider.module.css

@@ -0,0 +1,34 @@
+.prevnextbtns {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  width: 100%;
+}
+
+.prevnextbtns > button {
+  padding: 15px 35px;
+  background-color: var(--color-bg-2);
+  border: none;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.prevnextbtns > button > img {
+  width: 15px;
+}
+
+.prevnextbtns > button:nth-child(1) {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  background-color: #c7c9c8;
+}
+
+.prevnextbtns > button:nth-child(1) > img {
+  transform: rotateZ(180deg);
+}
+
+.prevnextbtns > button:nth-child(2) {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}

src/components/Slider.js

@@ -0,0 +1,38 @@
+import React from "react";
+// import { useDispatch, useSelector } from "react-redux";
+// import { nextCar } from "../redux/cars/carsSlice";
+import styles from "../CSS/Slider.module.css";
+import arrow from "../assets/arrow.png";
+
+const Slider = () => {
+  // const sliderIndex = useSelector((state) => state.cars.value);
+  // const dispatch = useDispatch();
+  const slider = document.querySelector("#slider");
+  const slideLeft = () => {
+    const leftMargin = +window.getComputedStyle(slider).marginLeft.slice(0, -2);
+    if (leftMargin < (slider.childElementCount + 1) * -350) return;
+    document.querySelector("#slider").style.marginLeft = `${
+      leftMargin - 350
+    }px`;
+  };
+
+  const slideRight = () => {
+    const leftMargin = +window.getComputedStyle(slider).marginLeft.slice(0, -2);
+    if (leftMargin >= 0) return;
+    document.querySelector("#slider").style.marginLeft = `${
+      leftMargin + 350
+    }px`;
+  };
+  return (
+    <div className={styles.prevnextbtns}>
+      <button type="button" onClick={() => slideLeft()}>
+        <img src={arrow} alt="Previous" />
+      </button>
+      <button type="button" onClick={() => slideRight()}>
+        <img src={arrow} alt="Next" />
+      </button>
+    </div>
+  );
+};
+
+export default Slider;

src/components/car/Car.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "../../CSS/Car.module.css";
+import carImg from "../../assets/car-1.png";
+import fb from "../../assets/fb.png";
+import twitter from "../../assets/twitter.png";
+import insta from "../../assets/insta.png";
+
+const Car = ({ name, image, description }) => (
+  <div className={styles.car}>
+    <div>
+      <img src={carImg} alt={image} className={styles.carImg} />
+    </div>
+    <div className={styles.carDetailsBox}>
+      <p className={styles.carName}>{name}</p>
+      <p className={styles.carDescription}>{description}</p>
+    </div>
+    <div className={styles.carSocialBox}>
+      <img src={fb} alt="Social Media Icon" />
+      <img src={twitter} alt="Social Media Icon" />
+      <img src={insta} alt="Social Media Icon" />
+    </div>
+  </div>
+);
+
+Car.propTypes = {
+  name: PropTypes.string,
+  image: PropTypes.string,
+  description: PropTypes.string,
+};
+
+Car.defaultProps = {
+  name: "",
+  image: "",
+  description: "",
+};
+
+export default Car;

src/components/car/Cars.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getCars } from "../../redux/cars/carsSlice";
+import Car from "./Car";
+import styles from "../../CSS/Cars.module.css";
+import Slider from "../Slider";
+
+const Cars = () => {
+  const { cars, isLoading } = useSelector((state) => state.cars);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getCars());
+  }, [dispatch, cars.length]);
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1>Loading...</h1>
+      </div>
+    );
+  }
+
+  return (
+    <section className={styles.carsSection}>
+      <div className={styles.titleBox}>
+        <h2>Latest Models</h2>
+
+        <p>Please select a car model</p>
+      </div>
+      <div id="slider" className={styles.cars}>
+        {cars.map((car) => (
+          <div key={car.id}>
+            <Car
+              name={car.name}
+              image={car.image}
+              description={car.description}
+            />
+          </div>
+        ))}
+      </div>
+      <Slider />
+    </section>
+  );
+};
+
+export default Cars;