Spaces:
Sleeping
Sleeping
File size: 2,101 Bytes
c3e8f3d 97e41aa c3e8f3d bfbf1a7 c3e8f3d d0a1b70 97e41aa 8e3dbd3 96ac62a 0d6f04b bfbf1a7 c3e8f3d 97e41aa d0a1b70 5411802 97e41aa c3e8f3d 97e41aa f80b091 9333689 97e41aa f80b091 97e41aa f80b091 97e41aa 5411802 97e41aa bfbf1a7 0d6f04b 973f0d8 97e41aa 5411802 97e41aa 54a4eaa bfbf1a7 96ac62a bfbf1a7 5411802 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 |
'use client';
import { PropsWithChildren } from 'react';
import Link from 'next/link';
import { useParams, usePathname, useRouter } from 'next/navigation';
import { cn } from '@/lib/utils';
import { ChatEntity } from '@/lib/types';
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 { format } from 'date-fns';
type ChatCardProps = PropsWithChildren<{
chat: ChatEntity;
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, url, messages, user, updatedAt } = chat;
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">
<Img src={url} 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">{user}</p>}
</div>
</div>
</ChatCardLayout>
);
};
export default ChatCard;
|