tamfrr/friascar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Atualizar src/app/admin/cars/[id]/page.jsx

Browse Source
This commit is contained in:
tamfrr
2024-11-27 13:00:55 -08:00
parent ee36dd9db9
commit 8c1aa51f28
1 changed files with 139 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/app/admin/cars/[id]/page.jsx
View File

@ -1,139 +1,166 @@
import React from 'react'; "use client";
import { X } from 'lucide-react'; 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 ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<header className="bg-white shadow-sm"> <header className="bg-white shadow">
<div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center"> <div className="max-w-7xl mx-auto py-6 px-4">
<div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center"> <div className="flex items-center gap-4">
<span className="text-gray-500">LOGO</span> <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> </div>
<span className="font-semibold text-gray-700">Add/Edit Car</span>
</div> </div>
</header> </header>
<main className="max-w-3xl mx-auto px-4 py-8"> <main className="max-w-7xl mx-auto py-6 px-4">
<form className="bg-white rounded-lg shadow p-6"> <div className="bg-white shadow rounded-lg p-6">
<form onSubmit={handleSubmit} className="space-y-6">
{/* Basic Information */} {/* Basic Information */}
<div className="mb-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<h2 className="text-lg font-semibold mb-4">Basic Information</h2>
<div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700">Name</label>
Car Name
</label>
<input <input
type="text" type="text"
className="w-full px-3 py-2 border border-gray-300 rounded-md" value={car.name}
placeholder="e.g. BMW M4 2024" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700">Year</label>
Price
</label>
<input <input
type="number" type="number"
className="w-full px-3 py-2 border border-gray-300 rounded-md" value={car.year}
placeholder="Price in dollars" 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>
<div> <div>
<label className="flex items-center gap-2"> <label className="block text-sm font-medium text-gray-700">Price</label>
<input type="checkbox" className="w-4 h-4" /> <input
<span className="text-sm font-medium text-gray-700">Mark as Special</span> 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">
Special Offer
</label> </label>
<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>
</div> </div>
{/* Technical Specifications */} {/* Specifications */}
<div className="mb-8"> <div className="border-t pt-6">
<h2 className="text-lg font-semibold mb-4">Technical Specifications</h2> <h3 className="text-lg font-medium text-gray-900 mb-4">Specifications</h3>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700">Consumption</label>
Engine Layout
</label>
<input <input
type="text" type="text"
className="w-full px-3 py-2 border border-gray-300 rounded-md" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700">Transmission</label>
Engine Volume <select
</label> value={car.specs.transmission}
<input onChange={(e) => setCar({
type="text" ...car,
className="w-full px-3 py-2 border border-gray-300 rounded-md" specs: {...car.specs, transmission: e.target.value}
/> })}
</div> className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
<div> >
<label className="block text-sm font-medium text-gray-700 mb-1"> <option value="">Select...</option>
Horse Power <option value="Automatic">Automatic</option>
</label> <option value="Manual">Manual</option>
<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> </select>
</div> </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>
</div> </div>
{/* Features/Extras */} {/* Images - será implementado depois */}
<div className="mb-8"> <div className="border-t pt-6">
<h2 className="text-lg font-semibold mb-4">Features & Extras</h2> <h3 className="text-lg font-medium text-gray-900 mb-4">Images</h3>
<div className="space-y-2"> <div className="bg-gray-50 p-4 rounded border-2 border-dashed border-gray-300 text-center">
{['ABS', 'Bluetooth', 'ESP', 'LED Headlights'].map((feature) => ( Image upload coming soon...
<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>
</label>
))}
</div> </div>
</div> </div>
{/* Images */} {/* Submit Button */}
<div className="mb-8"> <div className="flex justify-end">
<h2 className="text-lg font-semibold mb-4">Images</h2> <button
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> type="submit"
{[1, 2, 3, 4].map((n) => ( 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"
<div key={n} className="relative"> >
<div className="aspect-w-3 aspect-h-2 bg-gray-100 rounded-lg flex items-center justify-center"> <Save className="h-5 w-5 mr-2" />
<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>
))}
</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 Save Car
</button> </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> </div>
</form> </form>
</div>
</main> </main>
</div> </div>
); );
}; }
export default CarForm;