Update src/app/compare/page.tsx
This commit is contained in:
@@ -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<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'];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Search", id: "/search" },
|
||||
{ name: "Browse", id: "/browse" },
|
||||
{ name: "Compare", id: "/compare" },
|
||||
{ name: "Timeline", id: "/timeline" },
|
||||
{ name: "About", id: "/about" },
|
||||
]}
|
||||
brandName="AutoArchive"
|
||||
bottomLeftText="Explore Automotive History"
|
||||
bottomRightText="1886 to Present"
|
||||
/>
|
||||
</div>
|
||||
<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 id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Compare Vehicles Side by Side"
|
||||
description="Compare specifications, performance metrics, engines, transmissions, and features of up to 4 vehicles simultaneously. Analyze design evolution, performance differences, and technical innovations across generations and brands."
|
||||
tag="Comparison Tool"
|
||||
tagIcon={BarChart3}
|
||||
tagAnimation="entrance-slide"
|
||||
background={{ variant: "aurora" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/a-modern-sleek-automotive-database-inter-1772823292340-23f02fb5.png"
|
||||
imageAlt="AutoArchive Comparison Tool"
|
||||
mediaAnimation="entrance-slide"
|
||||
imagePosition="right"
|
||||
buttons={[
|
||||
{ text: "Start Comparing", href: "/compare" },
|
||||
{ text: "Browse Vehicles", href: "/browse" },
|
||||
]}
|
||||
buttonAnimation="entrance-slide"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="AutoArchive"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Search Database", href: "/search" },
|
||||
{ label: "Browse Vehicles", href: "/browse" },
|
||||
{ label: "Compare Cars", href: "/compare" },
|
||||
{ label: "Timeline Explorer", href: "/timeline" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Brand Directory", href: "/brands" },
|
||||
{ label: "Model Guide", href: "/models" },
|
||||
{ label: "Specifications", href: "/specs" },
|
||||
{ label: "Production Data", href: "/production" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Help & Support", href: "/help" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Contribute Data", href: "/contribute" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Data Attribution", href: "/attribution" },
|
||||
{ label: "Sitemap", href: "/sitemap" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/* 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>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user