refactor: batch 1

src/components/FileInput.tsx

@@ -1,5 +1,5 @@
+import classnames from 'classnames';
 import { useDropzone } from 'react-dropzone';
-import { Box } from '@chakra-ui/react';
 
 export interface FileInputProps {
   onReceiveFiles: (files: File[]) => void;
@@ -14,30 +14,19 @@ export function FileInput({ children, onReceiveFiles }: FileInputProps) {
   });
 
   return (
-    <Box
+    <div
       {...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',
-      })}
+      className={classnames(
+        'w-full max-w-xl border rounded-lg transition duration-500 p-6 border-base-300 mx-auto',
+        'cursor-pointer flex flex-col items-center hover:border-gray-400 hover:bg-gray-50',
+        {
+          'bg-blue-50 border-blue-700': isDragActive,
+        },
+      )}
+      tabIndex={0}
     >
       <input {...getInputProps()} />
-
       {children}
-    </Box>
+    </div>
   );
 }