Update src/app/browse/page.tsx
This commit is contained in:
@@ -1,39 +1,8 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } 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', image: '/car-1.jpg' },
|
||||
{ id: '2', brand: 'Toyota', name: 'Corolla', year: 2023, price: '$22,000', type: 'Sedan', image: '/car-2.jpg' },
|
||||
{ id: '3', brand: 'Honda', name: 'Civic', year: 2023, price: '$24,000', type: 'Sedan', image: '/car-3.jpg' },
|
||||
{ id: '4', brand: 'Honda', name: 'CR-V', year: 2023, price: '$32,000', type: 'SUV', image: '/car-4.jpg' },
|
||||
{ id: '5', brand: 'Ford', name: 'Mustang', year: 2023, price: '$40,000', type: 'Sports', image: '/car-5.jpg' },
|
||||
{ id: '6', brand: 'Ford', name: 'F-150', year: 2023, price: '$52,000', type: 'Truck', image: '/car-6.jpg' },
|
||||
{ id: '7', brand: 'BMW', name: '3 Series', year: 2023, price: '$45,000', type: 'Sedan', image: '/car-7.jpg' },
|
||||
{ id: '8', brand: 'Mercedes-Benz', name: 'C-Class', year: 2023, price: '$48,000', type: 'Sedan', image: '/car-8.jpg' },
|
||||
];
|
||||
|
||||
const YEARS = [2023, 2022, 2021, 2020];
|
||||
const TYPES = ['Sedan', 'SUV', 'Sports', 'Truck', 'Hatchback'];
|
||||
|
||||
export default function BrowsePage() {
|
||||
const [selectedBrand, setSelectedBrand] = useState<string | null>(null);
|
||||
const [selectedYear, setSelectedYear] = useState<number | null>(null);
|
||||
const [selectedType, setSelectedType] = useState<string | null>(null);
|
||||
|
||||
const brands = useMemo(() => [...new Set(CARS_DATABASE.map((car) => car.brand))], []);
|
||||
|
||||
const filteredCars = useMemo(() => {
|
||||
return CARS_DATABASE.filter((car) => {
|
||||
if (selectedBrand && car.brand !== selectedBrand) return false;
|
||||
if (selectedYear && car.year !== selectedYear) return false;
|
||||
if (selectedType && car.type !== selectedType) return false;
|
||||
return true;
|
||||
});
|
||||
}, [selectedBrand, selectedYear, selectedType]);
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
|
||||
const BrowsePage = () => {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -45,156 +14,12 @@ export default function BrowsePage() {
|
||||
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-12 text-center">Browse Cars</h1>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 bg-card rounded-lg p-6 border border-foreground/10">
|
||||
{/* Brand Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Filter by Brand</h3>
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => setSelectedBrand(null)}
|
||||
className={`block w-full text-left px-3 py-2 rounded transition ${
|
||||
selectedBrand === null
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'hover:bg-foreground/10'
|
||||
}`}
|
||||
>
|
||||
All Brands
|
||||
</button>
|
||||
{brands.map((brand) => (
|
||||
<button
|
||||
key={brand}
|
||||
onClick={() => setSelectedBrand(brand)}
|
||||
className={`block w-full text-left px-3 py-2 rounded transition ${
|
||||
selectedBrand === brand
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'hover:bg-foreground/10'
|
||||
}`}
|
||||
>
|
||||
{brand}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Year Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Filter by Year</h3>
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={() => setSelectedYear(null)}
|
||||
className={`block w-full text-left px-3 py-2 rounded transition ${
|
||||
selectedYear === null
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'hover:bg-foreground/10'
|
||||
}`}
|
||||
>
|
||||
All Years
|
||||
</button>
|
||||
{YEARS.map((year) => (
|
||||
<button
|
||||
key={year}
|
||||
onClick={() => setSelectedYear(year)}
|
||||
className={`block w-full text-left px-3 py-2 rounded transition ${
|
||||
selectedYear === year
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'hover:bg-foreground/10'
|
||||
}`}
|
||||
>
|
||||
{year}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Filter by Type</h3>
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => setSelectedType(null)}
|
||||
className={`block w-full text-left px-3 py-2 rounded transition ${
|
||||
selectedType === null
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'hover:bg-foreground/10'
|
||||
}`}
|
||||
>
|
||||
All Types
|
||||
</button>
|
||||
{TYPES.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setSelectedType(type)}
|
||||
className={`block w-full text-left px-3 py-2 rounded transition ${
|
||||
selectedType === type
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'hover:bg-foreground/10'
|
||||
}`}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cars Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredCars.length > 0 ? (
|
||||
filteredCars.map((car) => (
|
||||
<div key={car.id} className="bg-card rounded-lg overflow-hidden border border-foreground/10 hover:shadow-lg transition">
|
||||
<div className="h-48 bg-foreground/10 flex items-center justify-center">
|
||||
<span className="text-foreground/50">Car Image</span>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 className="font-bold text-lg">{car.brand}</h3>
|
||||
<p className="text-foreground/70">{car.name}</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-primary-cta/10 text-primary-cta rounded text-sm">{car.type}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-4 pt-4 border-t border-foreground/10">
|
||||
<div>
|
||||
<p className="text-foreground/70 text-sm">Year</p>
|
||||
<p className="font-semibold">{car.year}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-foreground/70 text-sm">Starting Price</p>
|
||||
<p className="font-semibold">{car.price}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full mt-4 px-4 py-2 bg-primary-cta text-white rounded hover:opacity-90 transition">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full text-center py-12">
|
||||
<p className="text-foreground/70 text-lg">No cars found matching your filters</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="nav" data-section="nav" />
|
||||
<div id="browse" data-section="browse" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default BrowsePage;
|
||||
|
||||
Reference in New Issue
Block a user