b7a4cf4ce8
All checks were successful
Build and Release / build-and-release (push) Successful in 13m12s
- Implemented Button component with various props for customization. - Created Modal component with header, content, and footer subcomponents. - Added Spinner component for loading indicators. - Developed Toast component for displaying notifications. - Introduced Tooltip component for contextual hints with keyboard shortcuts. - Added corresponding CSS modules for styling each component. - Updated index file to export new components. - Configured TypeScript settings for the UI package.
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
import { ChannelTextarea } from './ChannelTextarea';
|
|
import { Messages } from './Messages';
|
|
import { TypingUsers } from './TypingUsers';
|
|
import styles from './ChannelChatLayout.module.css';
|
|
|
|
interface ChannelChatLayoutProps {
|
|
channelId: string;
|
|
}
|
|
|
|
interface ReplyState {
|
|
eventId: string;
|
|
username: string;
|
|
}
|
|
|
|
export function ChannelChatLayout({ channelId }: ChannelChatLayoutProps) {
|
|
const [replyTo, setReplyTo] = useState<ReplyState | null>(null);
|
|
|
|
const handleReply = useCallback((eventId: string, username: string) => {
|
|
setReplyTo({ eventId, username });
|
|
}, []);
|
|
|
|
const handleCancelReply = useCallback(() => {
|
|
setReplyTo(null);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.messagesWrapper}>
|
|
<Messages channelId={channelId} onReply={handleReply} />
|
|
</div>
|
|
<div className={styles.inputArea}>
|
|
<TypingUsers channelId={channelId} />
|
|
<ChannelTextarea channelId={channelId} replyTo={replyTo} onCancelReply={handleCancelReply} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|