61 lines
3.2 KiB
TypeScript
61 lines
3.2 KiB
TypeScript
'use client';
|
|
import { FC } from "react";
|
|
import { Briefcase } from "lucide-react";
|
|
|
|
|
|
interface Props {
|
|
item: any;
|
|
isSelected: boolean;
|
|
onClickHandler: (item: any) => void;
|
|
}
|
|
|
|
const RenderOneClientSelection: FC<Props> = ({ item, isSelected, onClickHandler }) => {
|
|
if (isSelected) {
|
|
return (
|
|
<div key={item.uu_id} onClick={() => { onClickHandler(item) }}
|
|
className="w-full text-xs bg-white shadow rounded-lg overflow-hidden transition-all hover:shadow-md mb-2 cursor-pointer">
|
|
<div className="bg-amber-300 p-2 hover:bg-amber-400 transition-all">
|
|
<div className="flex items-center">
|
|
<div className="mr-2 relative">
|
|
<div className="w-8 h-8 rounded-full bg-amber-400 flex items-center justify-center overflow-hidden border border-white">
|
|
{item.avatar ? (<img src={item.avatar} alt="Company" className="w-full h-full object-cover" />) :
|
|
(<div className="text-white text-xs font-bold">{(item.public_name || "No Name").slice(0, 2)}</div>)}
|
|
</div>
|
|
<div className="absolute -bottom-0.5 -right-0.5 bg-white p-0.5 rounded-full border border-amber-400">
|
|
<Briefcase size={8} className="text-amber-600" />
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<h2 className="text-xs font-bold text-black truncate">{item.public_name} {item.company_type}</h2>
|
|
<p className="text-xs text-amber-800 truncate">{item.duty}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return (
|
|
<div key={item.uu_id} className="w-full text-xs bg-white shadow rounded-lg overflow-hidden transition-all mb-2 cursor-pointer">
|
|
<div className="bg-gray-100 p-2">
|
|
<div className="flex items-center">
|
|
<div className="mr-2 relative">
|
|
<div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden border border-white">
|
|
{item.avatar ? (<img src={item.avatar} alt="Company" className="w-full h-full object-cover" />) :
|
|
(<div className="text-white text-xs font-bold">{(item.duty || "No Duty").slice(0, 2)}</div>)}
|
|
</div>
|
|
<div className="absolute -bottom-0.5 -right-0.5 bg-white p-0.5 rounded-full border border-gray-300">
|
|
<Briefcase size={8} className="text-gray-600" />
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<h2 className="text-xs font-bold text-gray-700 truncate">{item.public_name} {item.company_type}</h2>
|
|
<p className="text-xs text-gray-600 truncate">{item.duty}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RenderOneClientSelection;
|