Create details page

frontend/.eslintrc.json

@@ -11,7 +11,15 @@
 	},
 	"plugins": ["react"],
 	"rules": {
-		"react/prop-types": "off"
+		"react/prop-types": "off",
+		"no-unused-vars": "warn",
+		"no-console": "warn",
+		"no-empty": "warn",
+		"jsx-a11y/click-events-have-key-events": "off",
+		"jsx-a11y/no-static-element-interactions": "off",
+		"jsx-a11y/no-noninteractive-element-interactions": "off",
+		"react/no-array-index-key": "warn",
+		"no-return-assign": "off"
 	},
 	"ignorePatterns": ["build/", "node_modules/"]
 }

frontend/package.json

@@ -5,14 +5,14 @@
 	"dependencies": {
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.0",
-		"@mui/icons-material": "^5.15.12",
-		"@mui/material": "^5.15.12",
+		"@mui/icons-material": "^5.15.13",
+		"@mui/material": "^5.15.13",
 		"@reduxjs/toolkit": "^1.9.7",
 		"@tailwindcss/line-clamp": "^0.4.4",
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^13.5.0",
-		"axios": "^1.6.7",
+		"axios": "^1.6.8",
 		"dotenv": "^16.4.5",
 		"jwt-decode": "^4.0.0",
 		"lodash": "^4.17.21",
@@ -64,7 +64,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-import": "^2.29.1",
 		"eslint-plugin-jsx-a11y": "^6.8.0",
-		"eslint-plugin-react": "^7.34.0",
+		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"postcss": "^8.4.35",
 		"prettier": "3.1.0",

frontend/src/components/buttons/AddToListButton.jsx

@@ -1,16 +1,26 @@
 import React from 'react';
 import AddIcon from '@mui/icons-material/Add';
 
-export default function AddToListButton({ onClick }) {
+export default function AddToListButton({ onClick, size = 'sm' }) {
 	return (
 		<button
 			type="button"
-			className="bg-mv-white border-mv-green border-solid border rounded-[5px] shadow-searchBarShadow w-full px-5 py-3 flex items-center justify-center"
+			className={`bg-mv-white border-mv-green border-solid border rounded-[5px] shadow-searchBarShadow w-full flex items-center justify-center ${
+				size === 'sm' ? 'px-5 py-3' : 'px-[64.5px] py-4'
+			}`}
 			onClick={onClick}
 		>
 			<div className="flex items-center justify-center">
-				<AddIcon className="w-[20px] h-[20px]" />
-				<p className="text-mv-black text-sm font-medium leading-5 tracking-[0.1px]">
+				<AddIcon
+					className={`text-mv-black ${
+						size === 'sm' ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]'
+					}`}
+				/>
+				<p
+					className={`text-mv-black font-medium leading-5 tracking-[0.1px] ${
+						size === 'sm' ? 'text-sm' : 'text-lg'
+					} `}
+				>
 					Add to List
 				</p>
 			</div>

frontend/src/components/buttons/BidNowButton.jsx

@@ -1,26 +1,22 @@
 import React from 'react';
 
-export default function BidNowButton({ size, onClick }) {
-	const sizeButtonClass = {
-		small: 'w-[173px] h-[46px]',
-		large: 'w-[285px] h-[66px]',
-	};
-
-	const sizeTextClass = {
-		small: 'text-[14px]',
-		large: 'text-[18px]',
-	};
-
+export default function BidNowButton({ onClick, size = 'sm' }) {
 	return (
 		<button
 			type="button"
-			className={`${sizeButtonClass[size]} bg-mv-green px-[24px] py-[10px] flex gap-[5px] items-center justify-center rounded-[5px] border border-solid border-mv-green shadow-buttonShadow `}
+			className={`bg-mv-green rounded-[5px] shadow-searchBarShadow w-full flex items-center justify-center ${
+				size === 'sm' ? 'px-5 py-3' : 'px-[89px] py-[19px]'
+			}`}
 			onClick={onClick}
 		>
-			<div
-				className={`${sizeTextClass[size]} leading-5 font-medium text-mv-white`}
-			>
-				Bid Now
+			<div className="flex items-center justify-center">
+				<p
+					className={`text-mv-white font-medium leading-5 tracking-[0.1px] ${
+						size === 'sm' ? 'text-sm' : 'text-lg'
+					} `}
+				>
+					Bid now
+				</p>
 			</div>
 		</button>
 	);

frontend/src/components/buttons/NextSimilarVehicleButton.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+export default function NextSimilarVehicleButton({
+	onClick,
+	isDisabled = false,
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={`flex py-2.5 px-3.5 gap-x-1 rounded-[50px] border border-solid items-center ${
+				isDisabled
+					? 'text-dark-grey border-dark-grey'
+					: 'text-mv-button-dark-grey border-button-dark-grey'
+			}`}
+		>
+			<p className="text-base font-normal">Next</p>
+			<ArrowForwardIcon className="w-[20px] h-[20px]" />
+		</button>
+	);
+}

frontend/src/components/buttons/PreviousSimilarVehicleButton.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+export default function PreviousSimilarVehicleButton({
+	onClick,
+	isDisabled = false,
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			disabled={isDisabled}
+			className={`flex py-2.5 px-3.5 gap-x-1 rounded-[50px] border border-solid items-center ${
+				isDisabled
+					? 'text-dark-grey border-dark-grey'
+					: 'text-mv-button-dark-grey border-button-dark-grey'
+			}`}
+		>
+			<ArrowBackIcon className="w-[20px] h-[20px]" />
+			<p className="text-base font-normal">Prev</p>
+		</button>
+	);
+}

frontend/src/components/cards/SimilarVehicleCard.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import truck from '../../assets/truck.png';
+import truck2 from '../../assets/truck2.png';
+import truck3 from '../../assets/truck3.png';
+import truck4 from '../../assets/truck4.png';
+import truck5 from '../../assets/truck5.png';
+import SimilarVehicleImageSlideshow from '../imageSlideshows/SimilarVehicleImageSlideshow';
+import AddToListButton from '../buttons/AddToListButton';
+import ViewModelButton from '../buttons/ViewModelButton';
+
+export default function SimilarVehicleCard() {
+	return (
+		<div className="flex flex-col w-full rounded-[20px] shadow-buttonShadow">
+			<SimilarVehicleImageSlideshow
+				images={[truck, truck2, truck3, truck4, truck5]}
+			/>
+			<div className="flex flex-col w-full h-1/2 px-[22px] mt-[23px] pb-[28px] grow">
+				<h1 className="text-mv-black text-[15px] font-semibold leading-[25px]">
+					VOLVO 6W Tractor Head W/ 8 SP. HI/LO T/M. W/ Windbreaker Projector
+					Light 2003 air bag suspension
+				</h1>
+				<div className="w-full items-center justify-between text-mv-black flex mt-[16px]">
+					<p className="text-sm font-base leading-5 tracking-[0.1px]">
+						Current bid:
+					</p>
+					<p className="text-xl font-medium leading-5">₱78,000</p>
+				</div>
+				<div className="flex mt-[27px] gap-x-[25px]">
+					<ViewModelButton onClick={() => {}} />
+					<AddToListButton size="sm" onClick={() => {}} />
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/footers/Footer.jsx

@@ -7,6 +7,7 @@ export default function Footer() {
 
 	const handleContactUsButton = () => {
 		navigate('/contact');
+		window.scrollTo(0, 0);
 	};
 
 	return (

frontend/src/components/imageSlideshows/ImageSlideshow.jsx

@@ -0,0 +1,79 @@
+import React, { useState, useRef, useEffect } from 'react';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+
+export default function ImageSlideshow({ images }) {
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const imageRefs = useRef([]);
+	const ids = [0, 1, 2, 3, 4, 5];
+
+	const handleImageClick = (index) => {
+		setCurrentIndex(index);
+	};
+
+	const goToNextImage = () => {
+		if (currentIndex < images.length - 1) {
+			setCurrentIndex(currentIndex + 1);
+		}
+	};
+
+	const goToPrevImage = () => {
+		if (currentIndex > 0) {
+			setCurrentIndex(currentIndex - 1);
+		}
+	};
+
+	useEffect(() => {
+		if (imageRefs.current[currentIndex]) {
+			imageRefs.current[currentIndex].scrollIntoView({
+				behavior: 'smooth',
+				block: 'nearest',
+				inline: 'start',
+			});
+		}
+	}, [currentIndex]);
+
+	return (
+		<div className="flex flex-col w-full">
+			<div className="relative">
+				<img
+					src={images[currentIndex]}
+					alt={`Vehicle ${currentIndex + 1}`}
+					className="w-full max-h-[440px] object-contain"
+				/>
+				{currentIndex < images.length - 1 && (
+					<div
+						onClick={goToNextImage}
+						className="absolute top-1/2 right-[10px] transform -translate-y-1/2 border border-solid border-mv-white rounded-full p-2 hover:cursor-pointer"
+					>
+						<NavigateNextIcon className="text-mv-white w-[25px] h-[25px]" />
+					</div>
+				)}
+				{currentIndex > 0 && (
+					<div
+						onClick={goToPrevImage}
+						className="absolute top-1/2 left-[10px] transform -translate-y-1/2 border border-solid border-mv-white rounded-full p-2 hover:cursor-pointer"
+					>
+						<NavigateBeforeIcon className="text-mv-white w-[25px] h-[25px]" />
+					</div>
+				)}
+			</div>
+			<div className="flex w-full mt-[24px] gap-x-[20px] overflow-x-auto items-center">
+				{images.map((image, index) => (
+					<img
+						ref={(el) => (imageRefs.current[index] = el)}
+						key={ids[index]}
+						src={image}
+						alt={`Thumbnail ${index + 1}`}
+						className={`w-1/4 max-h-[110px] object-contain cursor-pointer ${
+							currentIndex === index
+								? 'opacity-100'
+								: 'opacity-50 hover:opacity-100'
+						}`}
+						onClick={() => handleImageClick(index)}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}