Atualizar src/app/admin/cars/[id]/page.jsx
This commit is contained in:
@ -1,139 +1,166 @@
|
||||
import React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
"use client";
|
||||
import { useState } from 'react';
|
||||
import { Save, ArrowLeft } from 'lucide-react';
|
||||
|
||||
export default function CarForm({ params }) {
|
||||
const [car, setCar] = useState({
|
||||
name: '',
|
||||
year: '',
|
||||
price: '',
|
||||
isSpecial: false,
|
||||
specs: {
|
||||
consumption: '',
|
||||
transmission: '',
|
||||
mileage: ''
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
// Aqui virá a integração com a API
|
||||
console.log('Car data:', car);
|
||||
};
|
||||
|
||||
const CarForm = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
|
||||
<span className="text-gray-500">LOGO</span>
|
||||
<header className="bg-white shadow">
|
||||
<div className="max-w-7xl mx-auto py-6 px-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => window.location.href = '/admin'}
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<ArrowLeft className="h-6 w-6" />
|
||||
</button>
|
||||
<h1 className="text-3xl font-bold text-gray-900">
|
||||
{params.id === 'new' ? 'Add New Car' : 'Edit Car'}
|
||||
</h1>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-700">Add/Edit Car</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-3xl mx-auto px-4 py-8">
|
||||
<form className="bg-white rounded-lg shadow p-6">
|
||||
{/* Basic Information */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4">Basic Information</h2>
|
||||
<div className="space-y-4">
|
||||
<main className="max-w-7xl mx-auto py-6 px-4">
|
||||
<div className="bg-white shadow rounded-lg p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Car Name
|
||||
</label>
|
||||
<input
|
||||
<label className="block text-sm font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||
placeholder="e.g. BMW M4 2024"
|
||||
value={car.name}
|
||||
onChange={(e) => setCar({...car, name: e.target.value})}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Price
|
||||
</label>
|
||||
<input
|
||||
<label className="block text-sm font-medium text-gray-700">Year</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||
placeholder="Price in dollars"
|
||||
value={car.year}
|
||||
onChange={(e) => setCar({...car, year: e.target.value})}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" className="w-4 h-4" />
|
||||
<span className="text-sm font-medium text-gray-700">Mark as Special</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Specifications */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4">Technical Specifications</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Engine Layout
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||
<label className="block text-sm font-medium text-gray-700">Price</label>
|
||||
<input
|
||||
type="number"
|
||||
value={car.price}
|
||||
onChange={(e) => setCar({...car, price: e.target.value})}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Engine Volume
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Horse Power
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Transmission
|
||||
</label>
|
||||
<select className="w-full px-3 py-2 border border-gray-300 rounded-md">
|
||||
<option>Automatic</option>
|
||||
<option>Manual</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features/Extras */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4">Features & Extras</h2>
|
||||
<div className="space-y-2">
|
||||
{['ABS', 'Bluetooth', 'ESP', 'LED Headlights'].map((feature) => (
|
||||
<label key={feature} className="flex items-center gap-2">
|
||||
<input type="checkbox" className="w-4 h-4" />
|
||||
<span className="text-sm font-medium text-gray-700">{feature}</span>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Special Offer
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Images */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4">Images</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
<div key={n} className="relative">
|
||||
<div className="aspect-w-3 aspect-h-2 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400">+ Add Image</span>
|
||||
</div>
|
||||
<button className="absolute -top-2 -right-2 bg-red-500 text-white p-1 rounded-full">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={car.isSpecial}
|
||||
onChange={(e) => setCar({...car, isSpecial: e.target.checked})}
|
||||
className="rounded border-gray-300 text-blue-600 shadow-sm mt-2"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<button type="submit" className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
|
||||
Save Car
|
||||
</button>
|
||||
<button type="button" className="bg-gray-100 text-gray-600 px-6 py-2 rounded-lg hover:bg-gray-200 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* Specifications */}
|
||||
<div className="border-t pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Specifications</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Consumption</label>
|
||||
<input
|
||||
type="text"
|
||||
value={car.specs.consumption}
|
||||
onChange={(e) => setCar({
|
||||
...car,
|
||||
specs: {...car.specs, consumption: e.target.value}
|
||||
})}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Transmission</label>
|
||||
<select
|
||||
value={car.specs.transmission}
|
||||
onChange={(e) => setCar({
|
||||
...car,
|
||||
specs: {...car.specs, transmission: e.target.value}
|
||||
})}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
<option value="Automatic">Automatic</option>
|
||||
<option value="Manual">Manual</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Mileage</label>
|
||||
<input
|
||||
type="text"
|
||||
value={car.specs.mileage}
|
||||
onChange={(e) => setCar({
|
||||
...car,
|
||||
specs: {...car.specs, mileage: e.target.value}
|
||||
})}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Images - será implementado depois */}
|
||||
<div className="border-t pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Images</h3>
|
||||
<div className="bg-gray-50 p-4 rounded border-2 border-dashed border-gray-300 text-center">
|
||||
Image upload coming soon...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<Save className="h-5 w-5 mr-2" />
|
||||
Save Car
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarForm;
|
||||
}
|
||||
Reference in New Issue
Block a user