lots of stuff

apps/web/src/components/editor/assets-panel/drag-overlay.tsx

@@ -1,57 +1,60 @@
-import { Upload, Plus, Image } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Upload } from "lucide-react";
 
 interface MediaDragOverlayProps {
-  isVisible: boolean;
-  isProcessing?: boolean;
-  progress?: number;
-  onClick?: () => void;
-  isEmptyState?: boolean;
+	isVisible: boolean;
+	isProcessing?: boolean;
+	progress?: number;
+	onClick?: () => void;
 }
 
 export function MediaDragOverlay({
-  isVisible,
-  isProcessing = false,
-  progress = 0,
-  onClick,
-  isEmptyState = false,
+	isVisible,
+	isProcessing = false,
+	progress = 0,
+	onClick,
 }: MediaDragOverlayProps) {
-  if (!isVisible) return null;
+	if (!isVisible) return null;
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (isProcessing || !onClick) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  };
+	const handleClick = ({
+		event,
+	}: {
+		event: React.MouseEvent<HTMLButtonElement>;
+	}) => {
+		if (isProcessing || !onClick) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onClick();
+	};
 
-  return (
-    <div
-      className="bg-foreground/5 hover:bg-foreground/10 flex h-full flex-col items-center justify-center gap-4 rounded-lg p-8 text-center transition-all duration-200"
-      onClick={handleClick}
-    >
-      <div className="flex items-center justify-center">
-        <Upload className="text-foreground h-10 w-10" />
-      </div>
+	return (
+		<button
+			className="bg-foreground/5 hover:bg-foreground/10 flex h-full w-full flex-col items-center justify-center gap-4 rounded-lg p-8 text-center transition-all duration-200"
+			type="button"
+			disabled={isProcessing || !onClick}
+			onClick={(event) => handleClick({ event })}
+		>
+			<div className="flex items-center justify-center">
+				<Upload className="text-foreground size-10" />
+			</div>
 
-      <div className="space-y-2">
-        <p className="text-muted-foreground max-w-sm text-xs">
-          {isProcessing
-            ? `Processing your files (${progress}%)`
-            : "Drag and drop videos, photos, and audio files here"}
-        </p>
-      </div>
+			<div className="space-y-2">
+				<p className="text-muted-foreground max-w-sm text-xs">
+					{isProcessing
+						? `Processing your files (${progress}%)`
+						: "Drag and drop videos, photos, and audio files here"}
+				</p>
+			</div>
 
-      {isProcessing && (
-        <div className="w-full max-w-xs">
-          <div className="bg-muted/50 h-2 w-full rounded-full">
-            <div
-              className="bg-primary h-2 rounded-full transition-all duration-300"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
+			{isProcessing && (
+				<div className="w-full max-w-xs">
+					<div className="bg-muted/50 h-2 w-full rounded-full">
+						<div
+							className="bg-primary h-2 rounded-full transition-all duration-300"
+							style={{ width: `${progress}%` }}
+						/>
+					</div>
+				</div>
+			)}
+		</button>
+	);
 }