feat: add component dropzone

src/components/Dropzone/Dropzone.module.scss

@@ -0,0 +1,62 @@
+.dropzone {
+  height: 300px;
+  border-radius: 10px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: 0;
+}
+
+.dropzone img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dropzone p {
+  height: calc(100% - 60px);
+  border-radius: 10px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+}
+
+.dropzone p svg {
+  color: #4ecb79;
+  width: 24px;
+  height: 24px;
+  margin-bottom: 8px;
+  z-index: 999;
+}
+
+.preview {
+  display: flex;
+  width: 85%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.profile {
+  display: flex;
+  width: 100%;
+  height: 25vh;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.upload {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--orange);
+  height: 40px;
+  width: 40px;
+  z-index: 1;
+  position: absolute;
+  margin-left: 125px;
+  border-radius: 10px;
+}

src/components/Dropzone/index.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { FiCamera } from 'react-icons/fi';
+
+import Avvvatars from 'avvvatars-react';
+import { DropzoneProps } from 'types/IComponents';
+
+import { useAuth } from 'hooks/useAuth';
+
+import styles from './Dropzone.module.scss';
+
+const Dropzone: React.FC<DropzoneProps> = ({ onFileUploaded }) => {
+  const { user } = useAuth();
+  const [selectedFileUrl, setSelectedFileUrl] = useState('');
+
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      const file = acceptedFiles[0];
+
+      const fileUrl = URL.createObjectURL(file);
+
+      setSelectedFileUrl(fileUrl);
+      onFileUploaded(file);
+    },
+    [onFileUploaded],
+  );
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: 'image/*',
+  });
+
+  return (
+    <div className={styles.dropzone} {...getRootProps()}>
+      <input {...getInputProps()} accept="image/*" />
+
+      {selectedFileUrl ? (
+        <p>
+          <img src={selectedFileUrl} alt="Point thumbnail" className={styles.preview} />
+        </p>
+      ) : (
+        <>
+          <div className={styles.profile}>
+            <p>
+              {user?.user_metadata.picture || user?.user_metadata.avatar_url ? (
+                <>
+                  <img
+                    src={user?.user_metadata.picture || user?.user_metadata.avatar_url}
+                    alt="Perfil"
+                    className={styles.preview}
+                  />
+                </>
+              ) : (
+                <Avvvatars value={user?.user_metadata.name || ''} size={100} />
+              )}
+            </p>
+            <div className={styles.upload}>
+              <FiCamera />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Dropzone;