Enviar arquivos para "src/app/admin/cars/[id]"
This commit is contained in:
139
src/app/admin/cars/[id]/page.jsx
Normal file
139
src/app/admin/cars/[id]/page.jsx
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
|
||||||
|
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>
|
||||||
|
</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">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Car Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||||
|
placeholder="e.g. BMW M4 2024"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Price
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
||||||
|
placeholder="Price in dollars"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
))}
|
||||||
|
</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>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CarForm;
|
||||||
Reference in New Issue
Block a user