Dropzone

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5import { Progress } from '@/components/ui/progress'
6import { Spinner } from '@/components/ui/spinner'
7import { Upload, X, File, Image, FileText, FileCode, FileAudio, FileVideo } from 'lucide-react'
8 
9// Types
10export interface FileRejection {
11  file: File
12  errors: Array<{ code: string; message: string }>
13}
14 
15export interface DropzoneState {
16  isDragging: boolean
17  isDisabled: boolean
18  acceptedFiles: File[]
19  rejectedFiles: FileRejection[]
20  reset: () => void
21}
22 
23// Variants
24const dropzoneVariants = cva(
25  'relative flex flex-col items-center justify-center border-3 border-dashed border-foreground transition duration-200 cursor-pointer',
26  {
27    variants: {
28      state: {
29        idle: 'bg-background hover:bg-muted/30 shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:shadow-[6px_6px_0px_hsl(var(--shadow-color))] hover:translate-x-[-2px] hover:translate-y-[-2px]',
30        dragging: 'border-solid border-primary bg-primary/10 scale-[1.02] shadow-[8px_8px_0px_hsl(var(--primary))]',
31        disabled: 'opacity-50 cursor-not-allowed shadow-none',
32      },
33      variant: {
34        default: 'p-8',
35        compact: 'p-6',
36        minimal: 'p-3 border-2',
37      },
38    },
39    defaultVariants: {
40      state: 'idle',
41      variant: 'default',
42    },
43  }
44)
45 
46// Dropzone Props
47export interface DropzoneProps
48  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
49    VariantProps<typeof dropzoneVariants> {
50  onFilesAccepted: (files: File[]) => void
51  onFilesRejected?: (files: FileRejection[]) => void
52  accept?: Record<string, string[]>
53  maxSize?: number
54  maxFiles?: number
55  disabled?: boolean
56  children?: React.ReactNode | ((state: DropzoneState) => React.ReactNode)
57}
58 
59const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
60  (
61    {
62      onFilesAccepted,
63      onFilesRejected,
64      accept,
65      maxSize = 10 * 1024 * 1024, // 10MB default
66      maxFiles = 10,
67      disabled = false,
68      variant,
69      className,
70      children,
71      ...props
72    },
73    ref
74  ) => {
75    const [isDragging, setIsDragging] = React.useState(false)
76    const [isFocused, setIsFocused] = React.useState(false)
77    const [acceptedFiles, setAcceptedFiles] = React.useState<File[]>([])
78    const [rejectedFiles, setRejectedFiles] = React.useState<FileRejection[]>([])
79// … truncated