feat: added dummy settings modal

src/components/App.tsx

@@ -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>

src/components/Toolbar.tsx

@@ -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} />
+    </>
+  );
+}