DB-GPT/web/components/MenuModal/index.tsx
Dreammy23 471689ba20
feat(web): Unified frontend code style (#1923)
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>
2024-08-30 14:03:06 +08:00

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;