File size: 2,340 Bytes
af3ef26 7b71fb2 af3ef26 7b71fb2 362ec6c 04aba1b af3ef26 362ec6c 04aba1b 362ec6c 04aba1b 6b8fc2c 7b71fb2 04aba1b af3ef26 6b8fc2c 362ec6c af3ef26 04aba1b af3ef26 04aba1b 7b71fb2 af3ef26 7b71fb2 af3ef26 7b71fb2 af3ef26 04aba1b 6b8fc2c 362ec6c |
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 71 72 73 74 75 76 77 78 79 80 |
import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
import { KnowledgeRouteKey } from '@/constants/knowledge';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Flex, Space } from 'antd';
import { useCallback, useEffect } from 'react';
import { useDispatch, useNavigate, useSelector } from 'umi';
import styles from './index.less';
import KnowledgeCard from './knowledge-card';
const Knowledge = () => {
const dispatch = useDispatch();
const knowledgeModel = useSelector((state: any) => state.knowledgeModel);
const navigate = useNavigate();
const { data = [] } = knowledgeModel;
const fetchList = useCallback(() => {
dispatch({
type: 'knowledgeModel/getList',
payload: {},
});
}, []);
const handleAddKnowledge = () => {
navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`);
};
useEffect(() => {
fetchList();
}, [fetchList]);
return (
<div className={styles.knowledge}>
<div className={styles.topWrapper}>
<div>
<span className={styles.title}>Welcome back, Zing</span>
<p className={styles.description}>
Which database are we going to use today?
</p>
</div>
<Space size={'large'}>
<Button icon={<FilterIcon />} className={styles.filterButton}>
Filters
</Button>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={handleAddKnowledge}
className={styles.topButton}
>
Create knowledge base
</Button>
</Space>
</div>
{/* <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
{data.map((item: any) => {
return (
<Col
className="gutter-row"
key={item.name}
xs={24}
sm={12}
md={10}
lg={8}
>
<KnowledgeCard item={item}></KnowledgeCard>
</Col>
);
})}
</Row> */}
<Flex gap="large" wrap="wrap">
{data.map((item: any) => {
return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
})}
</Flex>
</div>
);
};
export default Knowledge;
|