import { useEffect, useState } from "react"import {  ImageCrop,  ImageCropApply,  ImageCropContent,  ImageCropReset,} from "@/components/kibo-ui/image-crop/index"export default function Demo() {  const [file, setFile] = useState<File | null>(null)  useEffect(() => {    const canvas = document.createElement("canvas")    canvas.width = 720    canvas.height = 480    const context = canvas.getContext("2d")    if (!context) return    const sky = context.createLinearGradient(0, 0, 720, 480)    sky.addColorStop(0, "#172554")    sky.addColorStop(0.55, "#7c3aed")    sky.addColorStop(1, "#f97316")    context.fillStyle = sky    context.fillRect(0, 0, 720, 480)    context.fillStyle = "#fde68a"    context.beginPath()    context.arc(550, 130, 92, 0, Math.PI * 2)    context.fill()    context.fillStyle = "#0f172a"    context.beginPath()    context.moveTo(0, 390)    context.lineTo(180, 220)    context.lineTo(280, 312)    context.lineTo(410, 168)    context.lineTo(720, 380)    context.lineTo(720, 480)    context.lineTo(0, 480)    context.fill()    context.fillStyle = "#1e293b"    context.beginPath()    context.moveTo(0, 424)    context.lineTo(180, 294)    context.lineTo(300, 374)    context.lineTo(390, 304)    context.lineTo(720, 410)    context.lineTo(720, 480)    context.lineTo(0, 480)    context.fill()    canvas.toBlob((blob) => {      if (blob) setFile(new File([blob], "landscape.png", { type: "image/png" }))    }, "image/png")  }, [])  if (!file) return null  return (    <ImageCrop file={file} aspect={1} className="w-full max-w-md">      <ImageCropContent className="w-full overflow-hidden rounded-lg" />      <div className="flex items-center justify-end gap-2 pt-2">        <ImageCropReset aria-label="Reset crop" />        <ImageCropApply aria-label="Apply crop" />      </div>    </ImageCrop>  )}