diff options
Diffstat (limited to 'apps/web/src/components/ui')
| -rw-r--r-- | apps/web/src/components/ui/drag-overlay.tsx | 91 |
1 files changed, 0 insertions, 91 deletions
diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx deleted file mode 100644 index eb190e89..00000000 --- a/apps/web/src/components/ui/drag-overlay.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Upload, Plus, Image } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-interface DragOverlayProps {
- isVisible: boolean;
- title?: string;
- description?: string;
- isProcessing?: boolean;
- progress?: number;
- onClick?: () => void;
- isEmptyState?: boolean;
-}
-
-export function DragOverlay({
- isVisible,
- title = "Drop files here",
- description = "Images, videos, and audio files",
- isProcessing = false,
- progress = 0,
- onClick,
- isEmptyState = false,
-}: DragOverlayProps) {
- 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 h-full min-h-[300px] text-center cursor-pointer rounded-lg border-2 border-dashed border-primary/30 hover:border-primary/50 hover:bg-primary/5 transition-all duration-200 p-8 z-10 bg-background/50 backdrop-blur-sm"
- onClick={handleClick}
- >
- <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary/10 to-primary/20 flex items-center justify-center mb-6 border border-primary/20">
- {isProcessing ? (
- <Upload className="h-10 w-10 text-primary animate-spin" />
- ) : isEmptyState ? (
- <Image className="h-10 w-10 text-primary" />
- ) : (
- <Upload className="h-10 w-10 text-primary" />
- )}
- </div>
-
- <div className="space-y-2 mb-6">
- <h3 className="text-lg font-medium text-foreground">
- {isProcessing ? "Processing files..." : title}
- </h3>
- <p className="text-sm text-muted-foreground max-w-sm">
- {isProcessing
- ? `Processing your files (${progress}%)`
- : description
- }
- </p>
- </div>
-
- {!isProcessing && (
- <div className="flex flex-col items-center gap-3">
- <Button
- variant="default"
- size="lg"
- onClick={handleClick}
- className="gap-2 px-6"
- >
- <Plus className="h-5 w-5" />
- {isEmptyState ? "Choose Files" : "Browse Files"}
- </Button>
- <p className="text-xs text-muted-foreground/60">
- {isEmptyState
- ? "Supports images, videos, and audio files"
- : "Or drop your 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>
- );
-}
|
