66 lines
2.2 KiB
JavaScript
66 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Sidebar from '../sidebar/Sidebar';
|
|
const CustomerList = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const customers = [
|
|
{ id: '12d22', name: 'jane cooper' },
|
|
{ id: '5d255', name: 'esther howard' },
|
|
{ id: '147r7', name: 'guy hawkins' },
|
|
{ id: '124fd', name: 'savannah nguyen' },
|
|
];
|
|
|
|
const handleAddCustomer = () => {
|
|
navigate('/add-customer');
|
|
};
|
|
|
|
return (
|
|
|
|
<div className="flex flex-row">
|
|
<Sidebar />
|
|
<div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
|
|
<div className="bg-gray-900 text-gray-300 p-6 rounded-lg">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h1 className="text-xl font-semibold text-orange-500">customers list</h1>
|
|
<button
|
|
className="bg-orange-500 text-white px-4 py-2 rounded-md text-sm"
|
|
onClick={handleAddCustomer}
|
|
>
|
|
add new customer
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center mb-4">
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
<span className="text-sm">filter </span>
|
|
</div>
|
|
<p className="text-sm mb-4">total customers ({customers.length})</p>
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="text-left text-xs uppercase">
|
|
<th className="py-2">#</th>
|
|
<th className="py-2">customer id</th>
|
|
<th className="py-2">customer name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customers.map((customer, index) => (
|
|
<tr key={customer.id} className="border-t border-gray-700">
|
|
<td className="py-2">{index + 1}</td>
|
|
<td className="py-2">{customer.id}</td>
|
|
<td className="py-2">{customer.name}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
};
|
|
|
|
export default CustomerList;
|