69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Cropper as CropperPrimitive } from "@origin-space/image-cropper";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function Cropper({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof CropperPrimitive.Root>) {
|
|
return (
|
|
<CropperPrimitive.Root
|
|
className={cn(
|
|
"relative flex w-full cursor-move touch-none items-center justify-center overflow-hidden focus:outline-none",
|
|
className,
|
|
)}
|
|
data-slot="cropper"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function CropperDescription({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof CropperPrimitive.Description>) {
|
|
return (
|
|
<CropperPrimitive.Description
|
|
className={cn("sr-only", className)}
|
|
data-slot="cropper-description"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function CropperImage({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof CropperPrimitive.Image>) {
|
|
return (
|
|
<CropperPrimitive.Image
|
|
className={cn(
|
|
"pointer-events-none h-full w-full object-cover",
|
|
className,
|
|
)}
|
|
data-slot="cropper-image"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function CropperCropArea({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof CropperPrimitive.CropArea>) {
|
|
return (
|
|
<CropperPrimitive.CropArea
|
|
className={cn(
|
|
"pointer-events-none absolute border-3 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.45)] in-[[data-slot=cropper]:focus-visible]:ring-3 in-[[data-slot=cropper]:focus-visible]:ring-white/50",
|
|
className,
|
|
)}
|
|
data-slot="cropper-crop-area"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export { Cropper, CropperCropArea, CropperDescription, CropperImage };
|