47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
import {
|
|||
|
|
Center,
|
|||
|
|
Flex,
|
|||
|
|
Modal,
|
|||
|
|
ModalBody,
|
|||
|
|
ModalCloseButton,
|
|||
|
|
ModalContent,
|
|||
|
|
ModalHeader,
|
|||
|
|
ModalOverlay,
|
|||
|
|
Tabs,
|
|||
|
|
Text,
|
|||
|
|
} from '@chakra-ui/react';
|
|||
|
|
|
|||
|
|
import { FileInput } from '~/components/FileInput';
|
|||
|
|
|
|||
|
|
export interface ImportSecretModalProps {
|
|||
|
|
clientName?: React.ReactNode;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
show: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onImport: (file: File) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function ImportSecretModal({ clientName, children, show, onClose, onImport }: ImportSecretModalProps) {
|
|||
|
|
const handleFileReceived = (files: File[]) => onImport(files[0]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal isOpen={show} onClose={onClose} closeOnOverlayClick={false} scrollBehavior="inside" size="xl">
|
|||
|
|
<ModalOverlay />
|
|||
|
|
<ModalContent>
|
|||
|
|
<ModalHeader>导入密钥数据库</ModalHeader>
|
|||
|
|
<ModalCloseButton />
|
|||
|
|
<Flex as={ModalBody} gap={2} flexDir="column" flex={1}>
|
|||
|
|
<Center>
|
|||
|
|
<FileInput onReceiveFiles={handleFileReceived}>拖放或点我选择含有密钥的数据库文件</FileInput>
|
|||
|
|
</Center>
|
|||
|
|
|
|||
|
|
<Text mt={2}>选择你的{clientName && <>「{clientName}」</>}客户端平台以查看对应说明：</Text>
|
|||
|
|
<Flex as={Tabs} variant="enclosed" flexDir="column" flex={1} minH={0}>
|
|||
|
|
{children}
|
|||
|
|
</Flex>
|
|||
|
|
</Flex>
|
|||
|
|
</ModalContent>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
}
|