fileInputRef.current?.click()}
+ onDrop={_onDrop}
+ onDragOver={_onDragOver}
+ onDragExit={_onDragEnd}>
+ {(file && !error && (
+
+
+
+ {file.name}
+ {byteFormatter(file.size)}
+
+
+ )) || (
+
+ {(error && ) || }
+ {(error && {error}) || {t('info')}}
+
+ )}
+
+
+ );
+};
diff --git a/web.new/src/components/Filedrop/index.ts b/web.new/src/components/Filedrop/index.ts
new file mode 100644
index 000000000..3ef23e7b0
--- /dev/null
+++ b/web.new/src/components/Filedrop/index.ts
@@ -0,0 +1 @@
+export * from './Filedrop';
diff --git a/web.new/src/components/Flex.tsx b/web.new/src/components/Flex.tsx
new file mode 100644
index 000000000..f175d0393
--- /dev/null
+++ b/web.new/src/components/Flex.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+type Props = {
+ wrap?: boolean;
+ gap?: string;
+ direction?: 'row' | 'column';
+};
+
+export const Flex = styled.div