You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
import { Layout, List, Input, Button } from 'antd';
|
|
import './Chat.css';
|
|
|
|
const { Sider, Content } = Layout;
|
|
const { TextArea } = Input;
|
|
|
|
const Chat = () => {
|
|
const channels = ['Channel 1', 'Channel 2'];
|
|
const messages = [
|
|
{ user: 'User 1', text: 'Hello!' },
|
|
{ user: 'User 2', text: 'Hi!' },
|
|
];
|
|
|
|
return (
|
|
<Layout className="chat-layout">
|
|
<Sider theme="light" width={300} className="chat-sider">
|
|
<List
|
|
header={<div>Channels</div>}
|
|
bordered
|
|
dataSource={channels}
|
|
renderItem={item => (
|
|
<List.Item>
|
|
{item}
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Content className="chat-content">
|
|
<List
|
|
itemLayout="horizontal"
|
|
dataSource={messages}
|
|
renderItem={item => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
title={item.user}
|
|
description={item.text}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<div className="chat-input">
|
|
<TextArea rows={4} />
|
|
<Button type="primary" className="chat-button">
|
|
Send
|
|
</Button>
|
|
</div>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Chat;
|