File size: 2,184 Bytes
f372e89 e3239a2 f372e89 e3239a2 |
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 |
import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
import { Checkbox, Layout, List, Typography } from 'antd';
import React, { useCallback } from 'react';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import styles from './index.less';
const { Header, Content, Footer, Sider } = Layout;
const SearchPage = () => {
const { list } = useNextFetchKnowledgeList();
const handleChange = useCallback((checkedValue: CheckboxValueType[]) => {
console.log('🚀 ~ handleChange ~ args:', checkedValue);
}, []);
return (
<Layout hasSider>
<Sider className={styles.searchSide} theme={'light'}>
<Checkbox.Group className={styles.checkGroup} onChange={handleChange}>
<List
bordered
dataSource={list}
className={styles.list}
renderItem={(item) => (
<List.Item>
<Checkbox value={item.id} className={styles.checkbox}>
<Typography.Text
ellipsis={{ tooltip: item.name }}
className={styles.knowledgeName}
>
{item.name}
</Typography.Text>
</Checkbox>
</List.Item>
)}
/>
</Checkbox.Group>
</Sider>
<Layout style={{ marginInlineStart: 200 }}>
<Header style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div
style={{
padding: 24,
textAlign: 'center',
}}
>
<p>long content</p>
{
// indicates very long content
Array.from({ length: 100 }, (_, index) => (
<React.Fragment key={index}>
{index % 20 === 0 && index ? 'more' : '...'}
<br />
</React.Fragment>
))
}
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design ©{new Date().getFullYear()} Created by Ant UED
</Footer>
</Layout>
</Layout>
);
};
export default SearchPage;
|