From 477a01d3971df8247dfce3d9a07dbd73b816a385 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 6 Mar 2026 19:20:22 +0000 Subject: [PATCH] Update src/app/compare/page.tsx --- src/app/compare/page.tsx | 257 ++++++++++++++++++++++++++------------- 1 file changed, 171 insertions(+), 86 deletions(-) diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx index 853d231..bf55c2b 100644 --- a/src/app/compare/page.tsx +++ b/src/app/compare/page.tsx @@ -1,99 +1,184 @@ -"use client"; +'use client'; -import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen"; -import HeroSplit from "@/components/sections/hero/HeroSplit"; -import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; -import { BarChart3 } from "lucide-react"; +import { useState } from 'react'; +import { ThemeProvider } from '@/components/theme/ThemeProvider'; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; + +const CARS_DATABASE = [ + { id: '1', brand: 'Toyota', name: 'Camry', year: 2023, price: '$28,500', type: 'Sedan', mpg: '32', hp: '203', seating: 5, trunk: '15.1 cu ft' }, + { id: '2', brand: 'Toyota', name: 'Corolla', year: 2023, price: '$22,000', type: 'Sedan', mpg: '38', hp: '169', seating: 5, trunk: '13.1 cu ft' }, + { id: '3', brand: 'Honda', name: 'Civic', year: 2023, price: '$24,000', type: 'Sedan', mpg: '36', hp: '180', seating: 5, trunk: '14.0 cu ft' }, + { id: '4', brand: 'Honda', name: 'CR-V', year: 2023, price: '$32,000', type: 'SUV', mpg: '28', hp: '190', seating: 5, trunk: '39.3 cu ft' }, + { id: '5', brand: 'Ford', name: 'Mustang', year: 2023, price: '$40,000', type: 'Sports', mpg: '21', hp: '480', seating: 4, trunk: '13.5 cu ft' }, + { id: '6', brand: 'Ford', name: 'F-150', year: 2023, price: '$52,000', type: 'Truck', mpg: '21', hp: '400', seating: 5, trunk: '52.8 cu ft' }, + { id: '7', brand: 'BMW', name: '3 Series', year: 2023, price: '$45,000', type: 'Sedan', mpg: '30', hp: '255', seating: 5, trunk: '16.9 cu ft' }, + { id: '8', brand: 'Mercedes-Benz', name: 'C-Class', year: 2023, price: '$48,000', type: 'Sedan', mpg: '28', hp: '255', seating: 5, trunk: '13.1 cu ft' }, +]; export default function ComparePage() { + const [selectedCars, setSelectedCars] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); + + const toggleCar = (carId: string) => { + setSelectedCars((prev) => { + if (prev.includes(carId)) { + return prev.filter((id) => id !== carId); + } else if (prev.length < 4) { + return [...prev, carId]; + } + return prev; + }); + }; + + const filteredCars = CARS_DATABASE.filter((car) => + `${car.brand} ${car.name}`.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + const comparedCars = CARS_DATABASE.filter((car) => selectedCars.includes(car.id)); + + const specs = ['Price', 'Type', 'MPG', 'HP', 'Seating', 'Trunk']; + return ( - + -
- -
+
+
+

Compare Cars

+

Select up to 4 cars to compare specifications

-
);