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

Atualizar src/app/admin/page.jsx

Browse Source
This commit is contained in:
tamfrr
2024-11-26 14:14:05 -08:00
parent 2372977876
commit ee36dd9db9
1 changed files with 78 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/app/admin/page.jsx
View File

@ -1,91 +1,102 @@
import React from 'react'; "use client";
import { Pencil, Trash, Plus } from 'lucide-react'; import { useState } from 'react';
import { PlusCircle, Pencil, Trash2, ImagePlus } from 'lucide-react';
const AdminDashboard = () => { export default function AdminPage() {
// Dados de exemplo (depois virão do backend) const [cars, setCars] = useState([
const cars = [
{ {
id: 1, id: 1,
name: 'BMW M4 2024', name: 'MERCEDES-BENZ C-CLASS 2015',
price: 75000,
image: '/api/placeholder/200/150',
isSpecial: true
},
{
id: 2,
name: 'Mercedes-Benz C-Class 2015',
price: 35000, price: 35000,
image: '/api/placeholder/200/150', special: true
isSpecial: true
} }
]; ]);
const handleDelete = async (id) => {
if (confirm('Are you sure you want to delete this car?')) {
// Aqui virá a deleção via API
setCars(cars.filter(car => car.id !== id));
}
};
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 sm:px-6 lg:px-8">
<div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center"> <div className="flex justify-between items-center">
<span className="text-gray-500">LOGO</span> <h1 className="text-3xl font-bold text-gray-900">Car Management</h1>
<button
onClick={() => window.location.href = '/admin/cars/new'}
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"
>
<PlusCircle className="h-5 w-5 mr-2" />
Add New Car
</button>
</div> </div>
<span className="font-semibold text-gray-700">Admin Panel</span>
</div> </div>
</header> </header>
<main className="max-w-7xl mx-auto px-4 py-8"> <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
{/* Add New Car Button */} <div className="bg-white shadow rounded-lg">
<div className="mb-8">
<button className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
<Plus className="w-5 h-5" />
Add New Car
</button>
</div>
{/* Cars List */}
<div className="bg-white rounded-lg shadow">
<div className="py-4 px-6 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-800">Cars Management</h2>
</div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full"> <table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Image</th> <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th> Image
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Special</th> <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th> Name
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Price
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Special
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{cars.map((car) => ( {cars.map((car) => (
<tr key={car.id}> <tr key={car.id}>
<td className="px-6 py-4"> <td className="px-6 py-4 whitespace-nowrap">
<img <div className="flex items-center">
src={car.image} <div className="h-10 w-10 flex-shrink-0">
alt={car.name} <img className="h-10 w-10 rounded object-cover" src="/api/placeholder/100/100" alt="" />
className="w-24 h-16 object-cover rounded" </div>
/> <button className="ml-2 text-blue-600 hover:text-blue-800">
</td> <ImagePlus className="h-5 w-5" />
<td className="px-6 py-4">{car.name}</td>
<td className="px-6 py-4">${car.price.toLocaleString()}</td>
<td className="px-6 py-4">
{car.isSpecial ? (
<span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
Special
</span>
) : '-'}
</td>
<td className="px-6 py-4">
<div className="flex gap-2">
<button className="p-2 text-blue-600 hover:bg-blue-50 rounded">
<Pencil className="w-5 h-5" />
</button>
<button className="p-2 text-red-600 hover:bg-red-50 rounded">
<Trash className="w-5 h-5" />
</button> </button>
</div> </div>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">{car.name}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">${car.price.toLocaleString()}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${car.special ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
{car.special ? 'Yes' : 'No'}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
<button
onClick={() => window.location.href = `/admin/cars/${car.id}`}
className="text-blue-600 hover:text-blue-900"
>
<Pencil className="h-5 w-5" />
</button>
<button
onClick={() => handleDelete(car.id)}
className="text-red-600 hover:text-red-900"
>
<Trash2 className="h-5 w-5" />
</button>
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@ -95,6 +106,4 @@ const AdminDashboard = () => {
</main> </main>
</div> </div>
); );
}; }
export default AdminDashboard;