63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import { formatTime } from "@/utils";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const ChatListCard = ({ chat, isSelling, isActive, handleChatTabClick }) => {
|
|
const user = isSelling ? chat?.buyer : chat?.seller;
|
|
const isUnread = chat?.unread_chat_count > 0;
|
|
|
|
return (
|
|
<CustomLink
|
|
scroll={false}
|
|
href={`/chat?activeTab=${isSelling ? "selling" : "buying"}&chatid=${
|
|
chat?.id
|
|
}`}
|
|
onClick={() => handleChatTabClick(chat, isSelling)}
|
|
className={`py-3 px-4 border-b flex items-center gap-4 cursor-pointer ${
|
|
isActive ? "bg-primary text-white" : ""
|
|
}`}
|
|
>
|
|
<div className="relative flex-shrink-0">
|
|
<CustomImage
|
|
src={user?.profile}
|
|
alt="User avatar"
|
|
width={56}
|
|
height={56}
|
|
className="w-[56px] h-auto aspect-square object-cover rounded-full"
|
|
/>
|
|
|
|
<CustomImage
|
|
src={chat?.item?.image}
|
|
alt="Item image"
|
|
width={24}
|
|
height={24}
|
|
className="w-[24px] h-auto aspect-square object-cover rounded-full absolute top-[32px] bottom-[-6px] right-[-6px]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2 w-full min-w-0">
|
|
<div className="w-full flex items-center gap-1 justify-between min-w-0">
|
|
<h5 className="font-medium truncate" title={user?.name}>
|
|
{user?.name}
|
|
</h5>
|
|
<span className="text-xs">{formatTime(chat?.last_message_time)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 justify-between">
|
|
<p
|
|
className="truncate text-sm"
|
|
title={chat?.item?.translated_name || chat?.item?.name}
|
|
>
|
|
{chat?.item?.translated_name || chat?.item?.name}
|
|
</p>
|
|
{isUnread && !isActive && (
|
|
<span className="flex items-center justify-center bg-primary text-white rounded-full px-2 py-1 text-xs">
|
|
{chat?.unread_chat_count}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CustomLink>
|
|
);
|
|
};
|
|
|
|
export default ChatListCard;
|