feat: added dummy settings modal
This commit is contained in:
parent
1f9bef9ce6
commit
4620a17e0d
@ -29,6 +29,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-icons": "^4.9.0",
|
||||
"react-promise-suspense": "^0.3.4",
|
||||
"react-redux": "^8.0.5"
|
||||
},
|
||||
|
@ -40,6 +40,9 @@ dependencies:
|
||||
react-dropzone:
|
||||
specifier: ^14.2.3
|
||||
version: 14.2.3(react@18.2.0)
|
||||
react-icons:
|
||||
specifier: ^4.9.0
|
||||
version: 4.9.0(react@18.2.0)
|
||||
react-promise-suspense:
|
||||
specifier: ^0.3.4
|
||||
version: 0.3.4
|
||||
@ -6690,6 +6693,15 @@ packages:
|
||||
use-sidecar: 1.1.2(@types/react@18.2.7)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-icons@4.9.0(react@18.2.0):
|
||||
resolution:
|
||||
{ integrity: sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg== }
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-is@16.13.1:
|
||||
resolution:
|
||||
{ integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== }
|
||||
|
@ -3,6 +3,7 @@ import { SelectFile } from './SelectFile';
|
||||
|
||||
import { FileListing } from '~/features/file-listing/FileListing';
|
||||
import { Footer } from './Footer';
|
||||
import { Toolbar } from './Toolbar';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -11,9 +12,8 @@ function App() {
|
||||
<Center>
|
||||
<SelectFile />
|
||||
</Center>
|
||||
<Box mt="8">
|
||||
<FileListing />
|
||||
</Box>
|
||||
<Toolbar />
|
||||
<FileListing />
|
||||
<Footer />
|
||||
</Container>
|
||||
</Box>
|
||||
|
23
src/components/Toolbar.tsx
Normal file
23
src/components/Toolbar.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Button, HStack, Icon, useDisclosure } from '@chakra-ui/react';
|
||||
import { MdSettings } from 'react-icons/md';
|
||||
import { SettingsModal } from '~/modals/SettingsModal';
|
||||
|
||||
export function Toolbar() {
|
||||
const {
|
||||
isOpen: isSettingsModalOpen,
|
||||
onClose: onSettingsModalClose,
|
||||
getButtonProps: getSettingsButtonProps,
|
||||
} = useDisclosure();
|
||||
|
||||
return (
|
||||
<>
|
||||
<HStack alignItems="center" justifyContent="center" p="4">
|
||||
<Button {...getSettingsButtonProps()}>
|
||||
<Icon as={MdSettings} mr="1" />
|
||||
设置
|
||||
</Button>
|
||||
</HStack>
|
||||
<SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} />
|
||||
</>
|
||||
);
|
||||
}
|
42
src/modals/SettingsModal.tsx
Normal file
42
src/modals/SettingsModal.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import {
|
||||
Button,
|
||||
HStack,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
export interface SettingsModalProps {
|
||||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
|
||||
return (
|
||||
<Modal onClose={onClose} isOpen={isOpen} closeOnOverlayClick={false} scrollBehavior="inside" size="full" isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>应用设置</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<p>Hallo</p>
|
||||
<p>Thank you, thank you very much.</p>
|
||||
<p>Ha-Halo, thank you</p>
|
||||
<p>Thank you very much!</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button onClick={onClose} variant="ghost" colorScheme="red">
|
||||
放弃
|
||||
</Button>
|
||||
<Button onClick={onClose}>应用</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
18
src/theme.ts
18
src/theme.ts
@ -1,6 +1,24 @@
|
||||
import { extendTheme } from '@chakra-ui/react';
|
||||
|
||||
export const theme = extendTheme({
|
||||
fonts: {
|
||||
body: [
|
||||
'-system-ui,-apple-system,BlinkMacSystemFont',
|
||||
'Source Han Sans CN,Noto Sans CJK SC',
|
||||
'Segoe UI,Helvetica,Arial,sans-serif',
|
||||
'Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
|
||||
].join(','),
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
baseStyle: {
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
defaultProps: {
|
||||
colorScheme: 'teal',
|
||||
},
|
||||
},
|
||||
},
|
||||
styles: {
|
||||
global: {
|
||||
body: {
|
||||
|
Loading…
Reference in New Issue
Block a user