feat: add drop sqlite database file

src/app/playground/client/page-client.tsx

@@ -7,6 +7,7 @@ import { LucideLoader } from "lucide-react";
 import Script from "next/script";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Database, SqlJsStatic } from "sql.js";
+import ScreenDropZone from "@/components/screen-dropzone";
 
 export default function PlaygroundEditorBody({
   preloadDatabase,
@@ -62,6 +63,17 @@ export default function PlaygroundEditorBody({
     [sqlInit]
   );
 
+  const onFileDrop = useCallback(
+    (buffer: ArrayBuffer) => {
+      if (sqlInit) {
+        const sqljsDatabase = new sqlInit.Database(new Uint8Array(buffer));
+        setRawDb(sqljsDatabase);
+        setDb(new SqljsDriver(sqljsDatabase));
+      }
+    },
+    [sqlInit]
+  );
+
   const sidebarMenu = useMemo(() => {
     return (
       <div className="flex flex-row gap-2 px-2 pb-2">
@@ -136,6 +148,7 @@ export default function PlaygroundEditorBody({
         onChange={onFileChange}
         multiple={false}
       />
+      <ScreenDropZone onFileDrop={onFileDrop} />
       {dom}
     </>
   );

src/components/screen-dropzone.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface Props {
+  onFileDrop: (buffer: ArrayBuffer) => void;
+}
+
+export default function ScreenDropZone({ onFileDrop }: Props) {
+  useEffect(() => {
+    const dropEventHandler = (e: DragEvent) => {
+      if (!e.dataTransfer) return;
+      const file = e.dataTransfer.files[0];
+
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (loadEvent) => {
+        onFileDrop(loadEvent.target?.result as ArrayBuffer);
+      };
+
+      reader.readAsArrayBuffer(file);
+    };
+
+    window.document.addEventListener("drop", dropEventHandler);
+
+    return () => {
+      window.document.removeEventListener("drop", dropEventHandler);
+    };
+  }, [onFileDrop]);
+
+  return <></>;
+}