add drag and drop to the timeline

1 files changed, 25 insertions, 0 deletions

diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx
new file mode 100644
index 00000000..ba6fe08f
--- /dev/null
+++ b/apps/web/src/components/ui/drag-overlay.tsx
@@ -0,0 +1,25 @@
+import { Upload } from "lucide-react";

+

+interface DragOverlayProps {

+  isVisible: boolean;

+  title?: string;

+  description?: string;

+}

+

+export function DragOverlay({

+  isVisible,

+  title = "Drop files here",

+  description = "Images, videos, and audio files",

+}: DragOverlayProps) {

+  if (!isVisible) return null;

+

+  return (

+    <div className="absolute inset-0 bg-accent/20 backdrop-blur-lg border-2 border-dashed border-accent flex items-center justify-center z-10 pointer-events-none">

+      <div className="text-center">

+        <Upload className="h-8 w-8 text-accent mx-auto mb-2" />

+        <p className="text-sm font-medium text-accent">{title}</p>

+        <p className="text-xs text-muted-foreground">{description}</p>

+      </div>

+    </div>

+  );

+}