cropper-controlled-demo

1"use client";
2 
3import { RotateCcwIcon } from "lucide-react";
4import * as React from "react";
5import { Button } from "@/registry/bases/base/ui/button";
6import {
7  Cropper,
8  CropperArea,
9  CropperImage,
10  type CropperPoint,
11} from "@/registry/bases/base/ui/cropper";
12import { Label } from "@/registry/bases/base/ui/label";
13import { Slider } from "@/registry/bases/base/ui/slider";
14 
15export default function CropperControlledDemo() {
16  const id = React.useId();
17  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });
18  const [zoom, setZoom] = React.useState(1);
19  const [rotation, setRotation] = React.useState(0);
20 
21  const onCropReset = React.useCallback(() => {
22    setCrop({ x: 0, y: 0 });
23    setZoom(1);
24    setRotation(0);
25  }, []);
26 
27  return (
28    <div className="relative flex size-full max-w-lg flex-col gap-4">
29      <Cropper
30        aspectRatio={1}
31        crop={crop}
32        zoom={zoom}
33        rotation={rotation}
34        onCropChange={setCrop}
35        onZoomChange={setZoom}
36        onRotationChange={setRotation}
37        className="min-h-[260px]"
38      >
39        <CropperImage
40          src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80"
41          alt="Landscape"
42          crossOrigin="anonymous"
43        />
44        <CropperArea />
45      </Cropper>
46      <div className="flex flex-col items-center gap-4 sm:flex-row">
47        <div className="flex w-full flex-col gap-2.5">
48          <Label htmlFor={`${id}-zoom`}>Zoom: {zoom.toFixed(2)}</Label>
49          <Slider
50            id={`${id}-zoom`}
51            value={[zoom]}
52            onValueChange={(value) =>
53              setZoom(Array.isArray(value) ? (value[0] ?? 1) : value)
54            }
55            min={1}
56            max={3}
57            step={0.1}
58          />
59        </div>
60        <div className="flex w-full flex-col gap-2.5">
61          <Label htmlFor={`${id}-rotation`}>
62            Rotation: {rotation.toFixed(0)}°
63          </Label>
64          <Slider
65            id={`${id}-rotation`}
66            value={[rotation]}
67            onValueChange={(value) =>
68              setRotation(Array.isArray(value) ? (value[0] ?? 0) : value)
69            }
70            min={-180}
71            max={180}
72            step={1}
73          />
74        </div>
75      </div>
76      <Button
77        variant="outline"
78        size="icon"
79        className="absolute top-3 right-2 size-8"
80        onClick={onCropReset}
81      >
82        <RotateCcwIcon />
83      </Button>
84// … truncated