bender/fc56726c-3e3f-41e4-a921-51ecfa3c8806
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update src/app/compare/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-06 19:32:16 +00:00
parent 46a92769d9
commit fe5a4b13a4
1 changed files with 9 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/app/compare/page.tsx
View File

@@ -1,43 +1,8 @@
'use client';
"use client";
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<string[]>([]);
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'];
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
const ComparePage = () => {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -49,137 +14,12 @@ export default function ComparePage() {
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
headingFontWeight="normal"
>
<NavbarStyleCentered
navItems={[
{ name: 'Home', id: '/' },
{ name: 'Browse', id: '/browse' },
{ name: 'Brands', id: '/brands' },
{ name: 'Compare', id: '/compare' },
{ name: 'Contact', id: '#contact' },
]}
button={{ text: 'Explore Now', href: '/browse' }}
/>
<div className="min-h-screen py-20 px-4">
<div className="max-w-7xl mx-auto">
<h1 className="text-5xl font-bold mb-4 text-center">Compare Cars</h1>
<p className="text-center text-foreground/70 mb-12 text-lg">Select up to 4 cars to compare specifications</p>
{/* Search and Selection */}
<div className="mb-12">
<div className="mb-6">
<input
type="text"
placeholder="Search cars by brand or model..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-3 rounded border border-foreground/20 bg-card focus:outline-none focus:border-primary-cta"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-h-96 overflow-y-auto">
{filteredCars.map((car) => (
<button
key={car.id}
onClick={() => toggleCar(car.id)}
className={`p-4 rounded border-2 transition text-left ${
selectedCars.includes(car.id)
? 'border-primary-cta bg-primary-cta/10'
: 'border-foreground/20 hover:border-foreground/40'
} ${
selectedCars.includes(car.id) || selectedCars.length < 4
? 'cursor-pointer'
: 'opacity-50 cursor-not-allowed'
}`}
disabled={!selectedCars.includes(car.id) && selectedCars.length >= 4}
>
<div className="flex items-start justify-between">
<div>
<p className="font-semibold">{car.brand}</p>
<p className="text-foreground/70">{car.name}</p>
<p className="text-sm text-foreground/60 mt-1">{car.price}</p>
</div>
<div
className={`h-5 w-5 rounded border-2 flex items-center justify-center ${
selectedCars.includes(car.id)
? 'border-primary-cta bg-primary-cta'
: 'border-foreground/30'
}`}
>
{selectedCars.includes(car.id) && <span className="text-white text-sm">✓</span>}
</div>
</div>
</button>
))}
</div>
</div>
{/* Comparison Table */}
{comparedCars.length > 0 && (
<div className="bg-card rounded-lg border border-foreground/10 overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<tbody>
{/* Car Names Row */}
<tr className="border-b border-foreground/10">
<td className="px-6 py-4 font-semibold text-foreground/70 w-24">Model</td>
{comparedCars.map((car) => (
<td key={car.id} className="px-6 py-4 text-center min-w-48 border-l border-foreground/10">
<p className="font-bold">{car.brand}</p>
<p className="text-foreground/70">{car.name}</p>
</td>
))}
</tr>
{/* Specs Rows */}
{specs.map((spec) => (
<tr key={spec} className="border-b border-foreground/10 hover:bg-foreground/5">
<td className="px-6 py-4 font-semibold text-foreground/70">{spec}</td>
{comparedCars.map((car) => {
let value = '';
switch (spec) {
case 'Price':
value = car.price;
break;
case 'Type':
value = car.type;
break;
case 'MPG':
value = `${car.mpg} mpg`;
break;
case 'HP':
value = `${car.hp} hp`;
break;
case 'Seating':
value = `${car.seating} seats`;
break;
case 'Trunk':
value = car.trunk;
break;
}
return (
<td key={car.id} className="px-6 py-4 text-center border-l border-foreground/10">
<p className="font-medium">{value}</p>
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
{comparedCars.length === 0 && (
<div className="text-center py-12">
<p className="text-foreground/70 text-lg">Select cars to compare their specifications</p>
</div>
)}
</div>
</div>
<div id="nav" data-section="nav" />
<div id="compare" data-section="compare" />
</ThemeProvider>
);
}
};
export default ComparePage;