Enviar arquivos para "src/app/cars/[id]"
This commit is contained in:
195
src/app/cars/[id]/page.jsx
Normal file
195
src/app/cars/[id]/page.jsx
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
const CarDetailsPage = () => {
|
||||||
|
// Dados de exemplo (depois virão do backend)
|
||||||
|
const car = {
|
||||||
|
id: 1,
|
||||||
|
name: 'BMW M4 2024',
|
||||||
|
images: [
|
||||||
|
'/api/placeholder/800/400',
|
||||||
|
'/api/placeholder/800/400',
|
||||||
|
'/api/placeholder/800/400',
|
||||||
|
'/api/placeholder/800/400'
|
||||||
|
],
|
||||||
|
technical: {
|
||||||
|
engine: {
|
||||||
|
layout: 'Inline',
|
||||||
|
volume: '3 L',
|
||||||
|
type: 'RWD',
|
||||||
|
power: '374 hp',
|
||||||
|
powerKW: '275 kW',
|
||||||
|
torque: '369',
|
||||||
|
compression: '10.2:1'
|
||||||
|
},
|
||||||
|
performance: {
|
||||||
|
topSpeed: '155 mph',
|
||||||
|
acceleration: '4.7 s'
|
||||||
|
},
|
||||||
|
transmission: {
|
||||||
|
type: 'Automatic',
|
||||||
|
gears: '8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
extras: [
|
||||||
|
'ABS',
|
||||||
|
'Auxiliary heating',
|
||||||
|
'Bluetooth',
|
||||||
|
'ESP',
|
||||||
|
'Full LED headlights',
|
||||||
|
'Monitoring system',
|
||||||
|
'Nitro',
|
||||||
|
'Storage package',
|
||||||
|
'Turbo-engine'
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const [currentImage, setCurrentImage] = React.useState(0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white shadow-sm">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||||
|
<div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
|
||||||
|
<span className="text-gray-500">LOGO</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="max-w-7xl mx-auto px-4 py-8">
|
||||||
|
{/* Car Title */}
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-8">{car.name}</h1>
|
||||||
|
|
||||||
|
{/* Image Gallery */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src={car.images[currentImage]}
|
||||||
|
alt={`${car.name} view ${currentImage + 1}`}
|
||||||
|
className="w-full h-96 object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentImage(prev => prev > 0 ? prev - 1 : car.images.length - 1)}
|
||||||
|
className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentImage(prev => prev < car.images.length - 1 ? prev + 1 : 0)}
|
||||||
|
className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||||
|
{car.images.map((img, idx) => (
|
||||||
|
<img
|
||||||
|
key={idx}
|
||||||
|
src={img}
|
||||||
|
alt={`${car.name} thumbnail ${idx + 1}`}
|
||||||
|
className={`w-full h-24 object-cover rounded cursor-pointer
|
||||||
|
${currentImage === idx ? 'ring-2 ring-blue-500' : ''}`}
|
||||||
|
onClick={() => setCurrentImage(idx)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Technical Specifications */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-6 mb-8">
|
||||||
|
<h2 className="text-2xl font-bold mb-6">Technical</h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
{/* Engine Section */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-xl font-semibold mb-4">
|
||||||
|
<span className="text-orange-500">⚙️</span>
|
||||||
|
<h3>Engine</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{Object.entries(car.technical.engine).map(([key, value]) => (
|
||||||
|
<div key={key} className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600 uppercase">{key.replace('_', ' ')}</span>
|
||||||
|
<span className="font-medium">{value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Performance & Transmission */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-xl font-semibold mb-4">
|
||||||
|
<span className="text-orange-500">🎯</span>
|
||||||
|
<h3>Performance</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{Object.entries(car.technical.performance).map(([key, value]) => (
|
||||||
|
<div key={key} className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600 uppercase">{key.replace('_', ' ')}</span>
|
||||||
|
<span className="font-medium">{value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-xl font-semibold mb-4">
|
||||||
|
<span className="text-orange-500">🔄</span>
|
||||||
|
<h3>Transmission</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{Object.entries(car.technical.transmission).map(([key, value]) => (
|
||||||
|
<div key={key} className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600 uppercase">{key.replace('_', ' ')}</span>
|
||||||
|
<span className="font-medium">{value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Extras/Features */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-6">
|
||||||
|
<h2 className="text-2xl font-bold mb-6">Features & Extras</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
{car.extras.map((extra, idx) => (
|
||||||
|
<div key={idx} className="flex items-center gap-2">
|
||||||
|
<div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center">
|
||||||
|
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>{extra}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-white shadow-sm mt-8">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-6">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<div className="text-gray-600 mb-4 md:mb-0">
|
||||||
|
<p>Contact: +351 123 456 789</p>
|
||||||
|
<p>Email: info@cardealer.com</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => window.open('https://wa.me/351123456789')}
|
||||||
|
className="flex items-center bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="mr-2">💬</span>
|
||||||
|
Contact via WhatsApp
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CarDetailsPage;
|
||||||
Reference in New Issue
Block a user