File size: 1,323 Bytes
dcce454 5365cac dcce454 5365cac dcce454 5365cac |
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 |
import { Avatar, Card, Flex, Layout, Space } from 'antd';
import classNames from 'classnames';
import { componentList } from '../mock';
import { useHandleDrag } from '../hooks';
import styles from './index.less';
const { Sider } = Layout;
interface IProps {
setCollapsed: (width: boolean) => void;
collapsed: boolean;
}
const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
const { handleDragStart } = useHandleDrag();
return (
<Sider
collapsible
collapsed={collapsed}
collapsedWidth={0}
theme={'light'}
onCollapse={(value) => setCollapsed(value)}
>
<Flex vertical gap={10} className={styles.siderContent}>
{componentList.map((x) => (
<Card
key={x.name}
hoverable
draggable
className={classNames(styles.operatorCard)}
onDragStart={handleDragStart(x.name)}
>
<Flex justify="space-between" align="center">
<Space size={15}>
<Avatar icon={x.icon} shape={'square'} />
<section>
<b>{x.name}</b>
<div>{x.description}</div>
</section>
</Space>
</Flex>
</Card>
))}
</Flex>
</Sider>
);
};
export default FlowSide;
|