feat: import ekey from Android db (#20)

src/components/FileInput.tsx

@@ -0,0 +1,43 @@
+import { useDropzone } from 'react-dropzone';
+import { Box } from '@chakra-ui/react';
+
+export interface FileInputProps {
+  onReceiveFiles: (files: File[]) => void;
+  multiple?: boolean;
+  children: React.ReactNode;
+}
+
+export function FileInput({ children, onReceiveFiles }: FileInputProps) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    multiple: true,
+    onDropAccepted: onReceiveFiles,
+  });
+
+  return (
+    <Box
+      {...getRootProps()}
+      w="100%"
+      maxW={480}
+      borderWidth="1px"
+      borderRadius="lg"
+      transitionDuration="0.5s"
+      p="6"
+      cursor="pointer"
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+      _hover={{
+        borderColor: 'gray.400',
+        bg: 'gray.50',
+      }}
+      {...(isDragActive && {
+        bg: 'blue.50',
+        borderColor: 'blue.700',
+      })}
+    >
+      <input {...getInputProps()} />
+
+      {children}
+    </Box>
+  );
+}

src/components/MarkdownContent.module.scss

@@ -0,0 +1,26 @@
+.markdown {
+  h3 {
+    font-weight: bold;
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-weight: bold;
+    font-size: 1.15em;
+    margin-top: 0.5em;
+  }
+
+  p,
+  pre {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    padding-left: 0.5em;
+    border-left: 2px solid #ddd;
+  }
+}

src/components/MarkdownContent.tsx

@@ -0,0 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import MarkdownContentClass from './MarkdownContent.module.scss';
+
+export function MarkdownContent({ children }: { children: string }) {
+  return (
+    <div className={MarkdownContentClass.markdown}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{children}</ReactMarkdown>
+    </div>
+  );
+}

src/components/SelectFile.tsx

@@ -1,77 +1,52 @@
-import { useDropzone } from 'react-dropzone';
-import { chakra, Box, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { UnlockIcon } from '@chakra-ui/icons';
 
 import { useAppDispatch } from '~/hooks';
 import { addNewFile, processFile } from '~/features/file-listing/fileListingSlice';
 import { nanoid } from 'nanoid';
+import { FileInput } from './FileInput';
 
 export function SelectFile() {
   const dispatch = useAppDispatch();
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    multiple: true,
-    onDropAccepted(files, _event) {
-      console.debug(
-        'react-dropzone/onDropAccepted(%o, %o)',
-        files.length,
-        files.map((x) => x.name)
+  const handleFileReceived = (files: File[]) => {
+    console.debug(
+      'react-dropzone/onDropAccepted(%o, %o)',
+      files.length,
+      files.map((x) => x.name)
+    );
+
+    for (const file of files) {
+      const blobURI = URL.createObjectURL(file);
+      const fileName = file.name;
+      const fileId = 'file://' + nanoid();
+
+      // FIXME: this should be a single action/thunk that first adds the item, then updates it.
+      dispatch(
+        addNewFile({
+          id: fileId,
+          blobURI,
+          fileName,
+        })
       );
-
-      for (const file of files) {
-        const blobURI = URL.createObjectURL(file);
-        const fileName = file.name;
-        const fileId = 'file://' + nanoid();
-
-        // FIXME: this should be a single action/thunk that first adds the item, then updates it.
-        dispatch(
-          addNewFile({
-            id: fileId,
-            blobURI,
-            fileName,
-          })
-        );
-        dispatch(processFile({ fileId }));
-      }
-    },
-  });
+      dispatch(processFile({ fileId }));
+    }
+  };
 
   return (
-    <Box
-      {...getRootProps()}
-      w="100%"
-      maxW={480}
-      borderWidth="1px"
-      borderRadius="lg"
-      transitionDuration="0.5s"
-      p="6"
-      cursor="pointer"
-      display="flex"
-      flexDir="column"
-      alignItems="center"
-      _hover={{
-        borderColor: 'gray.400',
-        bg: 'gray.50',
-      }}
-      {...(isDragActive && {
-        bg: 'blue.50',
-        borderColor: 'blue.700',
-      })}
-    >
-      <input {...getInputProps()} />
-
+    <FileInput multiple onReceiveFiles={handleFileReceived}>
       <Box pb={3}>
         <UnlockIcon boxSize={8} />
       </Box>
-      <Text textAlign="center">
+      <Text as="div" textAlign="center">
         拖放或
-        <chakra.span as="span" color="teal.400">
+        <Text as="span" color="teal.400">
           点我选择
-        </chakra.span>
+        </Text>
         需要解密的文件
         <Text fontSize="sm" opacity="50%">
           在浏览器内对文件进行解锁，零上传
         </Text>
       </Text>
-    </Box>
+    </FileInput>
   );
 }