diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-07-16 13:38:26 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-07-16 13:38:26 +0200 |
| commit | 49d467cd83522983da0a59892838d65f605fa78f (patch) | |
| tree | e405fca919948bd18966fbee108c649ebdfcc40d /apps/web/src/components/editor/media-panel/drag-overlay.tsx | |
| parent | 13db27c173a844239a3847369ee55216f7439c9e (diff) | |
| parent | 96f7516c94cc922519e5369ef132b62d9a52e85c (diff) | |
| download | opencut-49d467cd83522983da0a59892838d65f605fa78f.tar.gz | |
Merge branch 'staging' into pr/vishesh711/284
Diffstat (limited to 'apps/web/src/components/editor/media-panel/drag-overlay.tsx')
| -rw-r--r-- | apps/web/src/components/editor/media-panel/drag-overlay.tsx | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx new file mode 100644 index 00000000..3f3820db --- /dev/null +++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx @@ -0,0 +1,57 @@ +import { Upload, Plus, Image } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface MediaDragOverlayProps {
+ isVisible: boolean;
+ isProcessing?: boolean;
+ progress?: number;
+ onClick?: () => void;
+ isEmptyState?: boolean;
+}
+
+export function MediaDragOverlay({
+ isVisible,
+ isProcessing = false,
+ progress = 0,
+ onClick,
+ isEmptyState = false,
+}: MediaDragOverlayProps) {
+ if (!isVisible) return null;
+
+ const handleClick = (e: React.MouseEvent) => {
+ if (isProcessing || !onClick) return;
+ e.preventDefault();
+ e.stopPropagation();
+ onClick();
+ };
+
+ return (
+ <div
+ className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"
+ onClick={handleClick}
+ >
+ <div className="flex items-center justify-center">
+ <Upload className="h-10 w-10 text-foreground" />
+ </div>
+
+ <div className="space-y-2">
+ <p className="text-xs text-muted-foreground max-w-sm">
+ {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="w-full bg-muted/50 rounded-full h-2">
+ <div
+ className="bg-primary h-2 rounded-full transition-all duration-300"
+ style={{ width: `${progress}%` }}
+ />
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
|