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.
42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
// App.js
|
|
|
|
import React from 'react';
|
|
import { Layout, Menu } from 'antd';
|
|
// import './App.css';
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
function App() {
|
|
const channels = ['General', 'Random'];
|
|
const messages = [
|
|
{ user: 'User1', text: 'Hello!' },
|
|
{ user: 'User2', text: 'Hi!' },
|
|
];
|
|
|
|
return (
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Sider width={200}>
|
|
<Menu mode="inline" style={{ height: '100%', borderRight: 0 }}>
|
|
{channels.map(channel => (
|
|
<Menu.Item key={channel}>{channel}</Menu.Item>
|
|
))}
|
|
</Menu>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ background: '#fff', padding: 0 }} />
|
|
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
|
|
<div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
|
|
{messages.map((message, index) => (
|
|
<p key={index}>
|
|
<strong>{message.user}</strong>: {message.text}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default App;
|