Initial setup file upload

client/package.json

@@ -45,6 +45,7 @@
     "nuqs": "2.0.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-dropzone": "^14.3.5",
     "react-map-gl": "7.1.7",
     "react-resizable-panels": "2.1.6",
     "rooks": "7.14.1",

client/src/containers/profile/file-upload/index.tsx

@@ -0,0 +1,100 @@
+import React, { FC, useCallback, useState } from "react";
+
+import { useDropzone } from "react-dropzone";
+
+import { FilePlusIcon, XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { useToast } from "@/components/ui/toast/use-toast";
+
+const EXCEL_EXTENSIONS = [".xlsx", ".xls"];
+const MAX_FILES = 2;
+
+const FileUpload: FC = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  const { toast } = useToast();
+  const onDropAccepted = useCallback((acceptedFiles: File[]) => {
+    setFiles((prevFiles) => {
+      const remainingSlots = MAX_FILES - prevFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      return [...prevFiles, ...filesToAdd];
+    });
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDropAccepted,
+    accept: {
+      "application/vnd.ms-excel": EXCEL_EXTENSIONS,
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+        EXCEL_EXTENSIONS,
+    },
+    maxFiles: MAX_FILES,
+    disabled: files.length >= MAX_FILES,
+    noClick: files.length >= MAX_FILES,
+    noDrag: files.length >= MAX_FILES,
+  });
+  const removeFile = (fileToRemove: File) => {
+    setFiles((prevFiles) => prevFiles.filter((file) => file !== fileToRemove));
+  };
+  const handleUploadClick = () => {
+    // TODO: Adde API call when available
+    setFiles([]);
+    toast({ description: "Your files has been uploaded successfully." });
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card
+        {...getRootProps()}
+        variant="secondary"
+        className={cn({
+          "select-none border-dashed p-10 transition-colors": true,
+          "bg-card": isDragActive,
+          "cursor-pointer hover:bg-card": files.length < MAX_FILES,
+          "cursor-not-allowed opacity-50": files.length >= MAX_FILES,
+        })}
+      >
+        <input {...getInputProps()} />
+        <div className="flex flex-col items-center gap-2">
+          <FilePlusIcon className="h-5 w-5" />
+          <p className="text-sm">
+            {files.length < MAX_FILES
+              ? "Drop files, or click to upload"
+              : "Max amount of files exceeded"}
+          </p>
+        </div>
+      </Card>
+      {files.length > 0 && (
+        <div className="space-y-4">
+          <ol className="space-y-2">
+            {files.map((file: File) => (
+              <li key={file.name}>
+                <Card className="flex items-center justify-between">
+                  <p>
+                    {file.name} - {(file.size / 1024).toFixed(2)} KB
+                  </p>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => removeFile(file)}
+                  >
+                    <XIcon className="h-5 w-5" />
+                  </Button>
+                </Card>
+              </li>
+            ))}
+          </ol>
+          <div className="flex justify-end">
+            <Button type="button" onClick={handleUploadClick}>
+              Upload
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileUpload;

client/src/containers/profile/index.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useSetAtom } from "jotai";
 
 import CustomProjects from "@/containers/profile/custom-projects";
+import FileUpload from "@/containers/profile/file-upload";
 import ProfileSection from "@/containers/profile/profile-section";
 import ProfileSidebar from "@/containers/profile/profile-sidebar";
 import { intersectingAtom } from "@/containers/profile/store";
@@ -37,6 +38,11 @@ const sections = [
     ),
     Component: CustomProjects,
   },
+  {
+    id: "data-upload",
+    title: "Data upload",
+    Component: FileUpload,
+  },
   {
     id: "delete-account",
     title: "Delete account",

client/src/containers/profile/profile-section/index.tsx

@@ -13,7 +13,7 @@ import {
 interface ProfileSectionProps extends PropsWithChildren {
   id: string;
   title: string;
-  description: string | React.ReactNode;
+  description?: string | React.ReactNode;
 }
 
 const ProfileSection: FC<ProfileSectionProps> = ({
@@ -27,9 +27,11 @@ const ProfileSection: FC<ProfileSectionProps> = ({
       <Card variant="secondary" className="p-6">
         <CardHeader className="space-y-4">
           <CardTitle className="text-xl font-semibold">{title}</CardTitle>
-          <CardDescription className="text-muted-foreground">
-            {description}
-          </CardDescription>
+          {description && (
+            <CardDescription className="text-muted-foreground">
+              {description}
+            </CardDescription>
+          )}
         </CardHeader>
         <CardContent className="spacey-y-6">{children}</CardContent>
       </Card>