Spaces:
Sleeping
Sleeping
File size: 2,480 Bytes
c3e8f3d 97e41aa c3e8f3d bfbf1a7 c3e8f3d d0a1b70 97e41aa 8e3dbd3 96ac62a 0d6f04b d553ae5 5ec491a c3e8f3d 97e41aa 5ec491a 5411802 97e41aa c3e8f3d 97e41aa f80b091 9333689 97e41aa f80b091 97e41aa f80b091 97e41aa 5411802 97e41aa 5ec491a d553ae5 0d6f04b 973f0d8 97e41aa 5411802 97e41aa d553ae5 5ec491a bfbf1a7 96ac62a bfbf1a7 5ec491a d553ae5 5ec491a d553ae5 973f0d8 f80b091 97e41aa f80b091 c3e8f3d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
'use client';
import { PropsWithChildren } from 'react';
import Link from 'next/link';
import { useParams, usePathname, useRouter } from 'next/navigation';
import { cn } from '@/lib/utils';
import Image from 'next/image';
import clsx from 'clsx';
import Img from '../ui/Img';
import { format } from 'date-fns';
import { cleanInputMessage } from '@/lib/messageUtils';
import { IconClose } from '../ui/Icons';
import { ChatWithMessages } from '@/lib/db/types';
import { dbDeleteChat } from '@/lib/db/functions';
type ChatCardProps = PropsWithChildren<{
chat: ChatWithMessages;
isAdminView?: boolean;
}>;
export const ChatCardLayout: React.FC<
PropsWithChildren<{ link: string; classNames?: clsx.ClassValue }>
> = ({ link, children, classNames }) => {
return (
<Link
className={cn(
'p-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer w-full',
classNames,
)}
href={link}
>
{children}
</Link>
);
};
const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
const { id: chatIdFromParam } = useParams();
const { id, mediaUrl, messages, userId, updatedAt } = chat;
if (!id) {
return null;
}
const firstMessage = cleanInputMessage(messages?.[0]?.content ?? '');
const title = firstMessage
? firstMessage.length > 50
? firstMessage.slice(0, 50) + '...'
: firstMessage
: '(No messages yet)';
return (
<ChatCardLayout
link={isAdminView ? `/all/chat/${id}` : `/chat/${id}`}
classNames={chatIdFromParam === id && 'border-gray-500'}
>
<div className="overflow-hidden flex items-center size-full group">
<Img src={mediaUrl} alt={`chat-${id}-card-image`} className="w-1/4" />
<div className="flex items-start flex-col h-full ml-3 w-3/4">
<p className="text-sm mb-1">{title}</p>
<p className="text-xs text-gray-500">
{updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
</p>
{isAdminView && <p className="text-xs text-gray-500">{userId}</p>}
<IconClose
onClick={async e => {
e.stopPropagation();
await dbDeleteChat(id);
}}
className="absolute right-4 opacity-0 group-hover:opacity-100 top-1/2 -translate-y-1/2"
/>
</div>
</div>
</ChatCardLayout>
);
};
export default ChatCard;
|