feature: drag and drop with dropzone

Author: Eric-Zhang-Developer

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { Github, Upload } from "lucide-react";
 import Link from "next/link";
+import Dropzone from "react-dropzone";
 
 export default function Home() {
   return (
@@ -14,13 +15,22 @@ export default function Home() {
         </h2>
 
         {/* Drop Zone */}
-        <div className="border-2 px-1/2 py-30 flex flex-col gap-8 items-center justify-center w-1/2 border-dashed rounded-3xl mt-12 text-lg hover:cursor-pointer">
-          <Upload size={50}></Upload>
-          Drag & drop your followers.json & following.json files here
-          <span>or</span>
-          <button className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105">Select Files</button>
-        </div>
-
+        <Dropzone onDrop={(acceptedFiles) => console.log(acceptedFiles)}>
+          {({ getRootProps, getInputProps }) => (
+            <div
+              {...getRootProps()}
+              className="border-2 px-1/2 py-30 flex flex-col gap-8 items-center justify-center w-1/2 border-dashed rounded-3xl mt-12 text-lg hover:cursor-pointer"
+            >
+              <input {...getInputProps()}></input>
+              <Upload size={50}></Upload>
+              Drag & drop your followers.json & following.json files here
+              <span>or</span>
+              <button className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105">
+                Select Files
+              </button>
+            </div>
+          )}
+        </Dropzone>
         <Link href="/tutorial" className="underline">
           {" "}
           Don&apos;t have your files? Here&apos;s how to get them.