docs(cropper): add bilingual usage guides

2026-09-29 17:09:39 +08:00
parent 23e0867027
commit 844acad316
8 changed files with 340 additions and 0 deletions
@@ -0,0 +1,43 @@
+---
+title: Avatar crop
+description: Build a circular avatar preview and export a fixed-size PNG.
+order: 30
+toc:
+  - id: example
+    title: Example
+---
+
+## Example {#example}
+
+```tsx
+import { Cropper, cropImage, type CropArea } from "@workspace/cropper"
+
+function AvatarCropper({ src }: { src: string }) {
+  const [area, setArea] = React.useState<CropArea>()
+
+  async function saveAvatar() {
+    if (!area) return
+    const blob = await cropImage(src, area, {
+      height: 512,
+      shape: "circle",
+      type: "image/png",
+      width: 512,
+    })
+    await uploadAvatar(blob)
+  }
+
+  return (
+    <div className="space-y-4">
+      <Cropper
+        src={src}
+        shape="circle"
+        className="size-72"
+        onCropAreaChange={setArea}
+      />
+      <button type="button" disabled={!area} onClick={saveAvatar}>
+        Save avatar
+      </button>
+    </div>
+  )
+}
+```