1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
"use client"
import * as React from "react"
import { Primitive } from "@radix-ui/react-primitive"
import { Ban, CheckCircle2, Upload } from "lucide-react"
import { cn } from "@/lib/utils"
import * as DropzonePrimitive from "@/components/ui/dropzone-primitive"
export const Dropzone = DropzonePrimitive.Dropzone
export const DropzoneInput = DropzonePrimitive.Input
export const DropzoneZone = React.forwardRef<
React.ElementRef<typeof DropzonePrimitive.Zone>,
React.ComponentPropsWithoutRef<typeof DropzonePrimitive.Zone>
>(({ className, ...props }, ref) => (
<DropzonePrimitive.Zone
ref={ref}
className={cn(
"cursor-pointer rounded-md border-2 border-dashed border-input p-6 shadow-sm transition-colors hover:border-accent-foreground/50 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[drag-reject]:cursor-no-drop data-[no-click]:cursor-default data-[disabled]:border-inherit data-[drag-active]:border-accent-foreground/50 data-[drag-reject]:border-destructive data-[disabled]:bg-inherit data-[drag-active]:bg-accent data-[drag-reject]:bg-destructive/30 data-[disabled]:opacity-50",
className
)}
{...props}
/>
))
DropzoneZone.displayName = "DropzoneZone"
export const DropzoneUploadIcon = React.forwardRef<
React.ElementRef<typeof Upload>,
React.ComponentPropsWithoutRef<typeof Upload>
>(({ className, ...props }, ref) => (
<>
<DropzonePrimitive.DragAccepted>
<CheckCircle2 ref={ref} className={cn("size-8", className)} {...props} />
</DropzonePrimitive.DragAccepted>
<DropzonePrimitive.DragRejected>
<Ban ref={ref} className={cn("size-8", className)} {...props} />
</DropzonePrimitive.DragRejected>
<DropzonePrimitive.DragDefault>
<Upload ref={ref} className={cn("size-8", className)} {...props} />
</DropzonePrimitive.DragDefault>
</>
))
DropzoneUploadIcon.displayName = "DropzoneUploadIcon"
export const DropzoneGroup = React.forwardRef<
React.ElementRef<typeof Primitive.div>,
React.ComponentPropsWithoutRef<typeof Primitive.div>
>(({ className, ...props }, ref) => (
<Primitive.div
ref={ref}
className={cn("grid place-items-center gap-1.5", className)}
{...props}
/>
))
DropzoneGroup.displayName = "DropzoneGroup"
export const DropzoneTitle = React.forwardRef<
React.ElementRef<typeof Primitive.h3>,
React.ComponentPropsWithoutRef<typeof Primitive.h3>
>(({ className, ...props }, ref) => (
<Primitive.h3
ref={ref}
className={cn("font-medium leading-none tracking-tight", className)}
{...props}
/>
))
DropzoneTitle.displayName = "DropzoneTitle"
export const DropzoneDescription = React.forwardRef<
React.ElementRef<typeof Primitive.p>,
React.ComponentPropsWithoutRef<typeof Primitive.p>
>(({ className, ...props }, ref) => (
<Primitive.p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DropzoneDescription.displayName = "DropzoneDescription"
export const DropzoneTrigger = DropzonePrimitive.Trigger
export const DropzoneAccepted = DropzonePrimitive.Accepted
export const DropzoneRejected = DropzonePrimitive.Rejected
|
