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

Enviar arquivos para "src/app/admin/cars/[id]"

Browse Source
This commit is contained in:
tamfrr
2024-11-24 09:00:16 -08:00
parent 222791d639
commit 49859bbcfa
1 changed files with 139 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/app/admin/cars/[id]/page.jsx Normal file
View 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;