init

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/upload/Dropzone.tsx b/src/components/upload/Dropzone.tsx
new file mode 100644
index 0000000..6980f5c
--- /dev/null
+++ b/src/components/upload/Dropzone.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import Dropzone from 'react-dropzone';
+import UploadIcon from '@icons/upload.svg';
+import { Button } from '@/components/ui';
+import { useRef, useState } from 'react';
+
+export function FileDropzone() {
+    // const [files, setFiles] = useState<File[]>([]);
+    const hiddenInputRef = useRef<HTMLInputElement | null>(null);
+    return (
+        <Dropzone
+            multiple
+            onDrop={(acceptedFiles: File[]) => {
+                // setFiles((prev) => [...prev, ...acceptedFiles]);
+            }}
+        >
+            {({ getRootProps, getInputProps }) => (
+                <div
+                    {...getRootProps({
+                        className:
+                            'w-full h-[460px] justify-between p-7.5 border flex flex-col text-sm items-center rounded-[10px]',
+                    })}
+                >
+                    <input name="files" type="file" ref={hiddenInputRef} />
+                    <input {...getInputProps()} />
+
+                    <div className="flex flex-col justify-center items-center h-full w-full gap-2.5">
+                        <UploadIcon />
+                        <span>
+                            Выбери файлы на компьютере или перетащи сюда. JPG,
+                            PNG до 20MB.
+                        </span>
+                        <span>
+                            {hiddenInputRef.current?.files?.length ?? 0}
+                        </span>
+                    </div>
+                    <Button size={'lg'} className="justify-self-end">
+                        Выбрать
+                    </Button>
+                </div>
+            )}
+        </Dropzone>
+    );
+}