classify web

components/PagesComponent/Chat/ChatListCard.jsx

@@ -0,0 +1,62 @@
+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;