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

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

@@ -1,6 +1,55 @@
 "use client";
 import { useState } from 'react';
-import { Save, ArrowLeft } from 'lucide-react';
+import { Save, ArrowLeft, Plus, Star, Trash2 } from 'lucide-react';
+
+const ImageUpload = ({ images, onImageAdd, onImageRemove, onMainImage }) => {
+  return (
+    <div className="border-t pt-6">
+      <h3 className="text-lg font-medium text-gray-900 mb-4">Images</h3>
+      
+      {/* Grid de imagens */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+        {images.map((image, index) => (
+          <div key={index} className="relative group">
+            <img 
+              src={image.url} 
+              alt={`Car image ${index + 1}`}
+              className="w-full h-32 object-cover rounded-lg"
+            />
+            <div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center space-x-2">
+              <button
+                onClick={() => onMainImage(index)}
+                className={`p-1 rounded-full ${image.isMain ? 'bg-yellow-500' : 'bg-white'}`}
+                title={image.isMain ? 'Main image' : 'Set as main'}
+              >
+                <Star className="h-4 w-4" />
+              </button>
+              <button
+                onClick={() => onImageRemove(index)}
+                className="p-1 rounded-full bg-red-500"
+              >
+                <Trash2 className="h-4 w-4 text-white" />
+              </button>
+            </div>
+          </div>
+        ))}
+        
+        {/* Botão de upload */}
+        <label className="border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center cursor-pointer hover:border-gray-400">
+          <input
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={onImageAdd}
+            multiple
+          />
+          <Plus className="h-6 w-6 text-gray-400" />
+          <span className="mt-2 text-sm text-gray-500">Add Images</span>
+        </label>
+      </div>
+    </div>
+  );
+};
 
 export default function CarForm({ params }) {
   const [car, setCar] = useState({
@@ -15,10 +64,40 @@ export default function CarForm({ params }) {
     }
   });
 
+  const [images, setImages] = useState([]);
+
+  const handleImageAdd = (e) => {
+    const files = Array.from(e.target.files);
+    
+    files.forEach(file => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImages(prev => [...prev, {
+          file,
+          url: reader.result,
+          isMain: images.length === 0 // primeira imagem é a principal
+        }]);
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const handleImageRemove = (index) => {
+    setImages(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleMainImage = (index) => {
+    setImages(prev => prev.map((img, i) => ({
+      ...img,
+      isMain: i === index
+    })));
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     // Aqui virá a integração com a API
     console.log('Car data:', car);
+    console.log('Images:', images);
   };
 
   return (
@@ -140,13 +219,13 @@ export default function CarForm({ params }) {
               </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>
+            {/* Images Section */}
+            <ImageUpload 
+              images={images}
+              onImageAdd={handleImageAdd}
+              onImageRemove={handleImageRemove}
+              onMainImage={handleMainImage}
+            />
 
             {/* Submit Button */}
             <div className="flex justify-end">