Spaces:
Sleeping
Sleeping
File size: 2,378 Bytes
159e7fa |
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 77 78 79 80 81 |
'use client';
import { Chat } from '@prisma/client';
import React from 'react';
import {
SelectItem,
Select,
SelectTrigger,
SelectContent,
SelectIcon,
SelectGroup,
SelectSeparator,
} from './ui/Select';
import Img from './ui/Img';
import { format } from 'date-fns';
import { useParams, useRouter } from 'next/navigation';
import { IconPlus } from './ui/Icons';
export interface ChatSelectProps {
chat: Chat;
}
const ChatSelectItem: React.FC<ChatSelectProps> = ({ chat }) => {
const { id, title, mediaUrl, updatedAt } = chat;
return (
<SelectItem value={id} className="size-full cursor-pointer">
<div className="overflow-hidden flex items-center size-full group">
<div className="size-[36px] relative m-1">
<Img
src={mediaUrl}
alt={`chat-${id}-card-image`}
className="object-cover size-full"
/>
</div>
<div className="flex items-start flex-col h-full ml-3">
<p className="text-sm mb-1">{title ?? '(no title)'}</p>
<p className="text-xs text-gray-500">
{updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
</p>
</div>
</div>
</SelectItem>
);
};
const ChatSelect: React.FC<{ myChats: Chat[] }> = ({ myChats }) => {
const { id: chatIdFromParam } = useParams();
const currentChat = myChats.find(chat => chat.id === chatIdFromParam);
const router = useRouter();
return (
<Select
defaultValue={currentChat?.id}
value={currentChat?.id}
onValueChange={id => router.push(id === 'new' ? '/' : `/chat/${id}`)}
>
<SelectTrigger className="w-[240px]">
{currentChat?.title ?? 'Select a conversation'}
</SelectTrigger>
<SelectContent className="w-[320px]">
<SelectGroup>
<SelectItem value="new">
<div className="flex items-center justify-start">
<SelectIcon asChild>
<IconPlus className="size-4 opacity-50" />
</SelectIcon>
<div className="ml-4">New conversion</div>
</div>
</SelectItem>
{!!myChats.length && <SelectSeparator />}
{myChats.map(chat => (
<ChatSelectItem key={chat.id} chat={chat} />
))}
</SelectGroup>
</SelectContent>
</Select>
);
};
export default ChatSelect;
|