50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface RenderOneClientSelectionProps {
|
|
item: any;
|
|
isSelected: boolean;
|
|
onClickHandler: (client: any) => void;
|
|
}
|
|
|
|
const renderOneClientSelection = ({
|
|
item,
|
|
isSelected,
|
|
onClickHandler
|
|
}: RenderOneClientSelectionProps) => {
|
|
return (
|
|
<div
|
|
className={`w-full text-xs bg-white shadow rounded-lg overflow-hidden mb-2 transition-all ${isSelected ? 'border-2 border-amber-500' : ''} hover:shadow-md`}
|
|
onClick={() => onClickHandler(item)}
|
|
>
|
|
<div className={`${isSelected ? 'bg-amber-100' : 'bg-gray-50'} p-2 hover:bg-amber-50 transition-all`}>
|
|
<div className="flex items-center">
|
|
<div className="mr-2">
|
|
{item.logo ? (
|
|
<img className="rounded border border-gray-200" src={item.logo} alt="Logo" width={40} height={40} />
|
|
) : (
|
|
<div className="w-10 h-10 rounded bg-gray-200 flex items-center justify-center border border-gray-300">
|
|
<div className="text-gray-500 text-sm font-bold">{item.name ? item.name.slice(0, 2).toUpperCase() : 'C'}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<h2 className="text-sm font-bold text-gray-800 truncate">{item.name || 'Client'}</h2>
|
|
<p className="text-xs text-gray-500 truncate">{item.description || 'No description'}</p>
|
|
</div>
|
|
{isSelected && (
|
|
<div className="ml-auto">
|
|
<div className="bg-amber-500 rounded-full w-4 h-4 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default renderOneClientSelection;
|