feat: added dummy settings modal
This commit is contained in:
parent
1f9bef9ce6
commit
4620a17e0d
@ -29,6 +29,7 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
"react-dropzone": "^14.2.3",
|
||||||
|
"react-icons": "^4.9.0",
|
||||||
"react-promise-suspense": "^0.3.4",
|
"react-promise-suspense": "^0.3.4",
|
||||||
"react-redux": "^8.0.5"
|
"react-redux": "^8.0.5"
|
||||||
},
|
},
|
||||||
|
@ -40,6 +40,9 @@ dependencies:
|
|||||||
react-dropzone:
|
react-dropzone:
|
||||||
specifier: ^14.2.3
|
specifier: ^14.2.3
|
||||||
version: 14.2.3(react@18.2.0)
|
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:
|
react-promise-suspense:
|
||||||
specifier: ^0.3.4
|
specifier: ^0.3.4
|
||||||
version: 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)
|
use-sidecar: 1.1.2(@types/react@18.2.7)(react@18.2.0)
|
||||||
dev: false
|
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:
|
/react-is@16.13.1:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== }
|
{ integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== }
|
||||||
|
@ -3,6 +3,7 @@ import { SelectFile } from './SelectFile';
|
|||||||
|
|
||||||
import { FileListing } from '~/features/file-listing/FileListing';
|
import { FileListing } from '~/features/file-listing/FileListing';
|
||||||
import { Footer } from './Footer';
|
import { Footer } from './Footer';
|
||||||
|
import { Toolbar } from './Toolbar';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@ -11,9 +12,8 @@ function App() {
|
|||||||
<Center>
|
<Center>
|
||||||
<SelectFile />
|
<SelectFile />
|
||||||
</Center>
|
</Center>
|
||||||
<Box mt="8">
|
<Toolbar />
|
||||||
<FileListing />
|
<FileListing />
|
||||||
</Box>
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</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';
|
import { extendTheme } from '@chakra-ui/react';
|
||||||
|
|
||||||
export const theme = extendTheme({
|
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: {
|
styles: {
|
||||||
global: {
|
global: {
|
||||||
body: {
|
body: {
|
||||||
|
Loading…
Reference in New Issue
Block a user