65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
'use client';
|
|
|
|
import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react';
|
|
import BrokerAvatar from './BrokerAvatar';
|
|
import StatusIndicator from './StatusIndicator';
|
|
import ToggleSwitch from '@/components/ui/ToggleSwitch';
|
|
|
|
export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) {
|
|
if (isHidden) return null;
|
|
|
|
return (
|
|
<tr className={index%2!==0?"bg-gray-100 hover:bg-gray-50":"hover:bg-gray-50"}>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
{broker.name}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{broker.id}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<BrokerAvatar brokerName={broker.broker} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{broker.dateAdded}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<StatusIndicator status={broker.status} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
|
|
{broker.balance}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button
|
|
onClick={() => onToggleVisibility(broker.id)}
|
|
className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
|
|
title={isHidden ? "Show" : "Hide"}
|
|
>
|
|
{isHidden ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
</button>
|
|
<button
|
|
onClick={() => onEdit(broker)}
|
|
className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
|
|
title="Edit"
|
|
>
|
|
<Edit2 size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete(broker.id)}
|
|
className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
|
|
title="Delete"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-center">
|
|
<ToggleSwitch
|
|
isActive={broker.status === 'active'}
|
|
onToggle={() => onToggleStatus(broker.id)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|