Merge pull request #16 from fmanimashaun/car-listing-frontend

Car listing frontend

package.json

@@ -19,6 +19,7 @@
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
+    "uuid": "^9.0.1",
     "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^1.3.3"

src/components/CarList.jsx

@@ -1,17 +1,108 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import triangle from '../assets/imgs/triangle.png';
+import facebook from '../assets/imgs/facebook.png';
+import twitter from '../assets/imgs/twitter.png';
+import instagram from '../assets/imgs/instagram.png';
+import shape from '../assets/imgs/shape.png';
 
 function CarList({ cars }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const totalCars = cars.length;
+  const maxIndex = totalCars - 1;
+  const totalSlides = Math.ceil(totalCars / 3);
+
+  const handleNext = () => {
+    const nextIndex = Math.min(currentIndex + 3, maxIndex);
+    setCurrentIndex(nextIndex);
+  };
+
+  const handlePrev = () => {
+    const prevIndex = Math.max(currentIndex - 3, 0);
+    setCurrentIndex(prevIndex);
+  };
+
   return (
-    <div>
-      {cars?.map((car) => (
-        <Link key={car.id} to={`/cars/${car.id}`} className="block mb-4">
-          <img src={car.image_url} alt={car.name} className="w-full h-64 object-cover" />
-          <h2 className="text-xl font-bold mt-2">{car.name}</h2>
-          <p>{car.description}</p>
-        </Link>
-      ))}
+    <div className="my-5 py-5">
+      <div className="flex justify-center w-full">
+        <div className="flex space-x-4">
+          {[...Array(totalSlides)].map((_, index) => (
+            <button
+              key={uuidv4()}
+              type="button"
+              onClick={() => setCurrentIndex(index * 3)}
+              className={`${
+                index * 3 === currentIndex
+                  ? 'bg-black'
+                  : 'bg-light-gray'
+              } px-2 py-1 rounded-full text-transparent h-4 w-1`}
+            >
+              {index + 1}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center justify-center">
+        <button
+          type="button"
+          onClick={handlePrev}
+          disabled={currentIndex === 0}
+          className={`mr-4 px-2 py-1 rounded-md ${
+            currentIndex === 0 ? 'bg-light-gray text-gray-500' : 'bg-light-green text-white'
+          }`}
+        >
+          <img
+            src={triangle}
+            alt="Previous"
+            className="w-20 transform -rotate-90"
+          />
+        </button>
+        <div className="flex space-x-4">
+          {cars.slice(currentIndex, Math.min(currentIndex + 3, totalCars)).map((car) => (
+            <div key={car.id} className="w-1/3">
+              <div className="h-60 overflow-hidden">
+                <Link to={`/cars/${car.id}`} className="block h-full">
+                  <img
+                    src={car.image_url}
+                    alt={car.name}
+                    className="w-full h-full object-contain"
+                  />
+                </Link>
+              </div>
+              <div className="p-4">
+                <h2 className="text-xl font-bold">{car.name}</h2>
+                <div className="flex justify-center">
+                  <img src={shape} alt="shape" className="ml-5 transform rotate-45" />
+                </div>
+                <p className="text-light-gray">{car.description}</p>
+                <div className="flex w-full justify-center gap-3 pt-3">
+                  <img src={facebook} alt="facebook" className="w-10 h-10 cursor-pointer" />
+                  <img src={twitter} alt="twitter" className="w-10 h-10 cursor-pointer" />
+                  <img src={instagram} alt="instagram" className="w-10 h-10 cursor-pointer" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={handleNext}
+          disabled={currentIndex + 3 >= totalCars}
+          className={`ml-4 px-2 py-1 rounded-md ${
+            currentIndex + 3 >= totalCars ? 'bg-light-gray text-gray-500' : 'bg-light-green text-white'
+          }`}
+        >
+          <img
+            src={triangle}
+            alt="Next"
+            className="w-20 transform rotate-90"
+          />
+        </button>
+
+      </div>
     </div>
   );
 }

src/components/Sidebar.jsx

@@ -8,7 +8,7 @@ const SideNavBar = () => {
   const { isLoggedIn, role } = useSelector((state) => state.auth);
 
   return (
-    <aside className="flex flex-col items-center w-60 text-dark-blue" aria-label="Sidebar">
+    <aside className="flex flex-col items-center w-60 border-r-2" aria-label="Sidebar">
       <div className="pb-12 pt-4">
         <Link to="/" className="flex flex-col items-center">
           <img src={Logo} alt="logo" className="w-40" />

src/pages/Home.jsx

@@ -5,8 +5,11 @@ const Home = () => {
   const { appData: { cars } } = useSelector((state) => state.appData);
 
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">Cars</h1>
+    <div className="text-center">
+      <div className="py-5 mx-5">
+        <h2 className="text-3xl font-bold">LATEST MODELS</h2>
+        <h3>Please select a car model</h3>
+      </div>
       <CarList cars={cars} />
     </div>
   );

src/pages/Layout.jsx

@@ -32,7 +32,7 @@ const Layout = () => {
   return (
     <>
       <Sidebar />
-      <main className="flex-1 bg-gray-100 text-dark-blue p-4 overflow-auto">
+      <main className="flex-1 text-black p-4 overflow-auto">
         {renderContent()}
       </main>
     </>

tailwind.config.js

@@ -6,8 +6,9 @@ module.exports = {
     extend: {
       colors: {
         'dark-blue': '#211951',
-        'light-green': '#74E291',
+        'light-green': '#97bf0f',
         'dark-green': '#274931',
+        'light-gray': '#A4A4A4',
       },
       width: {
         'fit-content': 'fit-content',