From cb2a7484ed3c6797a33acc2d4ab21130f8f00008 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 14:50:22 +0200
Subject: add drag and drop to the timeline

---
 apps/web/src/components/ui/drag-overlay.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 apps/web/src/components/ui/drag-overlay.tsx

(limited to 'apps/web/src/components/ui')

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>
+  );
+}
-- 
cgit v1.3.1