mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-07-26 05:23:37 +00:00
Co-authored-by: Fangyin Cheng <staneyffer@gmail.com> Co-authored-by: 谨欣 <echo.cmy@antgroup.com> Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com> Co-authored-by: yanzhiyong <932374019@qq.com>
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { Menu, Modal, ModalProps } from 'antd';
|
|
import React, { useState } from 'react';
|
|
type Props = {
|
|
items: Array<{
|
|
key: string;
|
|
label: string;
|
|
onClick?: () => void;
|
|
children?: React.ReactNode;
|
|
}>;
|
|
modal: ModalProps;
|
|
};
|
|
function MenuModal({ items, modal }: Props) {
|
|
const [currentMenuKey, setCurrentMenuKey] = useState('edit');
|
|
return (
|
|
<Modal {...modal}>
|
|
<div className='flex justify-between gap-4'>
|
|
<div className='w-1/6'>
|
|
<Menu
|
|
className='h-full'
|
|
selectedKeys={[currentMenuKey]}
|
|
mode='inline'
|
|
onSelect={info => {
|
|
setCurrentMenuKey(info.key);
|
|
}}
|
|
inlineCollapsed={false}
|
|
items={items.map(item => ({ key: item.key, label: item.label }))}
|
|
/>
|
|
</div>
|
|
<div className='w-5/6'>
|
|
{items.map(item => {
|
|
if (item.key === currentMenuKey) {
|
|
return <React.Fragment key={item.key}>{item.children}</React.Fragment>;
|
|
}
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default MenuModal;
|