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

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

@ -1,91 +1,102 @@
import React from 'react';
import { Pencil, Trash, Plus } from 'lucide-react';
"use client";
import { useState } from 'react';
import { PlusCircle, Pencil, Trash2, ImagePlus } from 'lucide-react';
const AdminDashboard = () => {
// Dados de exemplo (depois virão do backend)
const cars = [
export default function AdminPage() {
const [cars, setCars] = useState([
{
id: 1,
name: 'BMW M4 2024',
price: 75000,
image: '/api/placeholder/200/150',
isSpecial: true
},
{
id: 2,
name: 'Mercedes-Benz C-Class 2015',
name: 'MERCEDES-BENZ C-CLASS 2015',
price: 35000,
image: '/api/placeholder/200/150',
isSpecial: true
special: 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 (
<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">Admin Panel</span>
</div>
</header>
<main className="max-w-7xl mx-auto px-4 py-8">
{/* Add New Car Button */}
<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" />
<header className="bg-white shadow">
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center">
<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>
{/* 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>
</header>
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="bg-white shadow rounded-lg">
<div className="overflow-x-auto">
<table className="w-full">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Image</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Special</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Image
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
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>
</thead>
<tbody className="divide-y divide-gray-200">
<tbody className="bg-white divide-y divide-gray-200">
{cars.map((car) => (
<tr key={car.id}>
<td className="px-6 py-4">
<img
src={car.image}
alt={car.name}
className="w-24 h-16 object-cover rounded"
/>
</td>
<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" />
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="h-10 w-10 flex-shrink-0">
<img className="h-10 w-10 rounded object-cover" src="/api/placeholder/100/100" alt="" />
</div>
<button className="ml-2 text-blue-600 hover:text-blue-800">
<ImagePlus className="h-5 w-5" />
</button>
</div>
</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>
))}
</tbody>
@ -95,6 +106,4 @@ const AdminDashboard = () => {
</main>
</div>
);
};
export default AdminDashboard;
}