48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React from 'react';
|
||
|
||
interface ChatTabsProps {
|
||
chats: Record<string, any>;
|
||
currentChatId: string | null;
|
||
createNewChat: () => void;
|
||
switchToChat: (chatId: string) => void;
|
||
closeChat: (chatId: string) => void;
|
||
}
|
||
|
||
const ChatTabs: React.FC<ChatTabsProps> = ({ chats, currentChatId, createNewChat, switchToChat, closeChat }) => {
|
||
return (
|
||
<div className="flex bg-gray-800 p-2">
|
||
{Object.keys(chats).map((chatId) => (
|
||
<div
|
||
key={chatId}
|
||
className={`px-4 py-2 mr-2 rounded-t-lg flex items-center ${
|
||
chatId === currentChatId ? 'bg-gray-600' : 'bg-gray-700'
|
||
}`}
|
||
>
|
||
<button
|
||
onClick={() => switchToChat(chatId)}
|
||
className="flex-grow text-left"
|
||
>
|
||
Chat {chatId}
|
||
</button>
|
||
<button
|
||
className="ml-2 text-red-500 hover:text-red-700"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
closeChat(chatId);
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
<button
|
||
className="px-4 py-2 bg-green-600 rounded-t-lg"
|
||
onClick={createNewChat}
|
||
>
|
||
+ New Chat
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ChatTabs; |