cropper-shapes-demo

1"use client";
2 
3import * as React from "react";
4import {
5  Cropper,
6  CropperArea,
7  CropperImage,
8  type CropperObjectFit,
9  type CropperPoint,
10  type CropperProps,
11  type CropperShape,
12} from "@/registry/bases/base/ui/cropper";
13import { Label } from "@/registry/bases/base/ui/label";
14import {
15  Select,
16  SelectContent,
17  SelectItem,
18  SelectTrigger,
19  SelectValue,
20} from "@/registry/bases/base/ui/select";
21import { Switch } from "@/registry/bases/base/ui/switch";
22 
23const shapes: { label: string; value: CropperShape }[] = [
24  { label: "Rectangle", value: "rectangle" },
25  { label: "Circle", value: "circle" },
26] as const;
27 
28const objectFits: { label: string; value: CropperObjectFit }[] = [
29  { label: "Contain", value: "contain" },
30  { label: "Cover", value: "cover" },
31  { label: "Horizontal Cover", value: "horizontal-cover" },
32  { label: "Vertical Cover", value: "vertical-cover" },
33] as const;
34 
35export default function CropperShapesDemo() {
36  const id = React.useId();
37  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });
38  const [zoom, setZoom] = React.useState(1);
39  const [shape, setShape] =
40    React.useState<NonNullable<CropperShape>>("rectangle");
41  const [objectFit, setObjectFit] =
42    React.useState<NonNullable<CropperObjectFit>>("contain");
43  const [withGrid, setWithGrid] = React.useState(false);
44  const [allowOverflow, setAllowOverflow] = React.useState(false);
45 
46  return (
47    <div className="flex flex-col gap-4">
48      <div className="grid grid-cols-2 gap-4">
49        <div className="flex items-center gap-2">
50          <Label htmlFor={`${id}-shape`}>Shape:</Label>
51          <Select
52            value={shape}
53            onValueChange={(value: CropperShape | null) => {
54              if (value) setShape(value);
55            }}
56          >
57            <SelectTrigger id={`${id}-shape`} size="sm" className="w-32">
58              <SelectValue />
59            </SelectTrigger>
60            <SelectContent>
61              {shapes.map((s) => (
62                <SelectItem key={s.value} value={s.value}>
63                  {s.label}
64                </SelectItem>
65              ))}
66            </SelectContent>
67          </Select>
68        </div>
69        <div className="flex items-center gap-2">
70          <Label htmlFor={`${id}-object-fit`}>Object Fit:</Label>
71          <Select
72            value={objectFit}
73            onValueChange={(value: CropperObjectFit | null) => {
74              if (value) setObjectFit(value);
75            }}
76          >
77// … truncated