Spaces:
Sleeping
Sleeping
File size: 1,584 Bytes
c3e8f3d 97e41aa c3e8f3d d0a1b70 97e41aa 8e3dbd3 c3e8f3d 97e41aa d0a1b70 97e41aa c3e8f3d 97e41aa f80b091 973f0d8 97e41aa f80b091 97e41aa f80b091 97e41aa 973f0d8 97e41aa 8e3dbd3 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 |
'use client';
import { PropsWithChildren } from 'react';
import Link from 'next/link';
import { useParams } 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';
type ChatCardProps = PropsWithChildren<{
chat: ChatEntity;
}>;
export const ChatCardLayout: React.FC<
PropsWithChildren<{ link: string; classNames?: clsx.ClassValue }>
> = ({ link, children, classNames }) => {
return (
<Link
className={cn(
'p-2 m-2 bg-background max-h-[100px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
classNames,
)}
href={link}
>
{children}
</Link>
);
};
const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
const { id: chatIdFromParam } = useParams();
const { id, url, messages, user } = chat;
const firstMessage = messages?.[0]?.content;
const title = firstMessage
? firstMessage.length > 50
? firstMessage.slice(0, 50) + '...'
: firstMessage
: '(No messages yet)';
return (
<ChatCardLayout
link={`/chat/${id}`}
classNames={chatIdFromParam === id && 'border-gray-500'}
>
<div className="overflow-hidden flex items-center size-full">
<Img src={url} className="w-1/4 " />
<div className="flex items-start h-full">
<p className="text-sm w-3/4 ml-3">{title}</p>
</div>
</div>
</ChatCardLayout>
);
};
export default ChatCard;
|