103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { Clock, Package } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card } from "@/components/ui/card";
|
|
import type { Chat } from "@/lib/hooks/use-chat";
|
|
import { formatTimeAgo } from "@/lib/utils";
|
|
|
|
interface ChatListItemProps {
|
|
chat: Chat;
|
|
currentUserId: number;
|
|
onChatClick: () => void;
|
|
}
|
|
|
|
export function ChatListItem({
|
|
chat,
|
|
currentUserId,
|
|
onChatClick,
|
|
}: ChatListItemProps) {
|
|
const otherUser =
|
|
chat.buyer_id === currentUserId ? chat.seller_cache : chat.buyer_cache;
|
|
|
|
const unreadCount =
|
|
chat.buyer_id === currentUserId
|
|
? chat.buyer_unread_count
|
|
: chat.seller_unread_count;
|
|
|
|
const listing = chat.listing_cache;
|
|
|
|
return (
|
|
<Card
|
|
className="p-4 cursor-pointer hover:bg-accent transition-colors"
|
|
onClick={onChatClick}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
{/* Avatar do outro usuário */}
|
|
<Avatar className="h-12 w-12 flex-shrink-0">
|
|
<AvatarFallback>
|
|
{(otherUser.character_name || otherUser.username)
|
|
.charAt(0)
|
|
.toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
{/* Conteúdo */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<h4 className="font-semibold text-sm truncate">
|
|
{otherUser.character_name || otherUser.username}
|
|
</h4>
|
|
{unreadCount > 0 && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="h-5 min-w-5 px-1.5 text-xs"
|
|
>
|
|
{unreadCount}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{/* Preview do item */}
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
|
|
<Package className="h-3 w-3 flex-shrink-0" />
|
|
<span className="truncate">{listing.item_name}</span>
|
|
</div>
|
|
|
|
{/* Preview da última mensagem */}
|
|
{chat.last_message_preview && (
|
|
<p className="text-xs text-muted-foreground truncate mb-1">
|
|
{chat.last_message_preview}
|
|
</p>
|
|
)}
|
|
|
|
{/* Timestamp */}
|
|
{chat.last_message_at && (
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Clock className="h-3 w-3" />
|
|
<span>{formatTimeAgo(new Date(chat.last_message_at))}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Imagem do item (opcional) */}
|
|
{listing.item_image_url && (
|
|
<div className="relative w-12 h-12 rounded-lg bg-muted flex-shrink-0 overflow-hidden">
|
|
<Image
|
|
src={listing.item_image_url}
|
|
alt={listing.item_name}
|
|
fill
|
|
className="object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.style.display = "none";
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|