Cropper

1"use client";
2 
3import * as React from "react";
4import type { Area, Point } from "react-easy-crop";
5import CropperLib from "react-easy-crop";
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8import { Slider } from "./slider";
9 
10interface CropperProps extends MaterialAxisProps {
11  image: string;
12  onCropComplete: (croppedArea: Area, croppedAreaPixels: Area) => void;
13  aspect?: number;
14  variant?: "default" | "glass";
15  className?: string;
16}
17 
18/* Role: bordered adaptive glass. */
19const ROLE = {
20  border: true,
21};
22 
23export function Cropper({ image, onCropComplete, aspect = 1, variant = "glass", className, ...props }: CropperProps) {
24  /* This component never forwards unknown props to the DOM — only the axes are consumed. */
25  const [axes] = splitAxisProps(props);
26  const [crop, setCrop] = React.useState<Point>({
27    x: 0,
28    y: 0,
29  });
30  const [zoom, setZoom] = React.useState(1);
31  const [_croppedAreaPixels, setCroppedAreaPixels] = React.useState<Area | null>(null);
32 
33  const handleCropComplete = React.useCallback(
34    (croppedArea: Area, croppedAreaPixels: Area) => {
35      setCroppedAreaPixels(croppedAreaPixels);
36      onCropComplete(croppedArea, croppedAreaPixels);
37    },
38    [
39      onCropComplete,
40    ],
41  );
42 
43  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
44  const m = materialSurface(variant === "default" ? null : ROLE, axes);
45 
46  return (
47    <div
48      data-material={m?.["data-material"]}
49      className={cn(m?.className, "relative w-full h-[400px]", variant === "glass" && "rounded-lg overflow-hidden", className)}
50    >
51      <CropperLib
52        image={image}
53        crop={crop}
54        zoom={zoom}
55        aspect={aspect}
56        onCropChange={setCrop}
57        onZoomChange={setZoom}
58        onCropComplete={handleCropComplete}
59      />
60      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-3/4">
61        <Slider
62          value={[
63            zoom,
64          ]}
65          min={1}
66          max={3}
67          step={0.1}
68          onValueChange={(value) => setZoom(value[0])}
69        />
70      </div>
71    </div>
72  );
73}