Image Cropper

1import { ImageCropper, ImageCropperImage, ImageCropperSelection, ImageCropperHandle } from "@/components/ui/image-cropper";
2
3<ImageCropper />

1"use client";
2
3import {
4  ImageCropper as ArkImageCropper,
5  useImageCropper as useArkImageCropper,
6} from "@ark-ui/react/image-cropper";
7import type React from "react";
8import { cn } from "@/lib/utils";
9
10export const useImageCropper = useArkImageCropper;
11
12interface ImageCropperProps
13  extends React.ComponentProps<typeof ArkImageCropper.Root> {}
14
15export const ImageCropper = (props: ImageCropperProps) => {
16  const { className, children, ...rest } = props;
17
18  return (
19    <ArkImageCropper.Root
20      className={cn(
21        "[--cropper-accent:var(--color-white)] [--cropper-handler-size:--spacing(2)] [--cropper-handler-width:--spacing(1)]",
22        "relative",
23        "w-full",
24        "aspect-video",
25        className
26      )}
27      data-slot="image-cropper"
28      {...rest}