diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-03-26 00:37:41 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-03-26 00:37:41 +0000 |
| commit | e0dfb55c5457aec489fc084c4567e791b4c65eb1 (patch) | |
| tree | 68543a65d88f5afb3a0202925804103daa91bc6f /components/ui/dropzone.tsx | |
3/25 까지의 대표님 작업사항
Diffstat (limited to 'components/ui/dropzone.tsx')
| -rw-r--r-- | components/ui/dropzone.tsx | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/components/ui/dropzone.tsx b/components/ui/dropzone.tsx new file mode 100644 index 00000000..a72826d9 --- /dev/null +++ b/components/ui/dropzone.tsx @@ -0,0 +1,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 |
