'use client'; import * as React from 'react'; import { RiCloseLine, RiHistoryFill, RiImageAiLine, RiZoomInLine, RiZoomOutLine, } from '@remixicon/react'; import * as CompactButton from './components/ui/compact-button'; import * as Slider from './components/ui/slider'; export function ImageEditor() { const [isOpen, setIsOpen] = React.useState(false); const [zoomLevel, setZoomLevel] = React.useState(100); const [rotation, setRotation] = React.useState(0); const imageRef = React.useRef(null); const sliderRef = React.useRef(null); const handleZoomChange = React.useCallback( ([value = 100]: number[]) => { setZoomLevel(value); if (imageRef.current) { const scale = value / 100; imageRef.current.style.transform = `scale(${scale}) rotate(${rotation}deg)`; } }, [rotation], ); const handleZoomIn = React.useCallback(() => { const newZoom = Math.min(zoomLevel + 10, 200); setZoomLevel(newZoom); if (imageRef.current) { const scale = newZoom / 100; imageRef.current.style.transform = `scale(${scale}) rotate(${rotation}deg)`; } }, [zoomLevel, rotation]); const handleZoomOut = React.useCallback(() => { const newZoom = Math.max(zoomLevel - 10, 50); setZoomLevel(newZoom); if (imageRef.current) { const scale = newZoom / 100; imageRef.current.style.transform = `scale(${scale}) rotate(${rotation}deg)`; } }, [zoomLevel, rotation]); const handleRotate = React.useCallback(() => { setRotation((prev) => { const newRotation = (prev + 90) % 360; if (imageRef.current) { const scale = zoomLevel / 100; imageRef.current.style.transform = `scale(${scale}) rotate(${newRotation}deg)`; } return newRotation; }); }, [zoomLevel]); return (

Clear all files emma-wright-avatar.png Saves

{Array.from({ length: 9 }).map((_, i) => (

= 6 ? 'none' : undefined, }} /> ))}

{Array.from({ length: 9 }).map((_, i) => (

{(i % 3 === 0 || (i + 1) % 3 === 0) && (

{Array.from({ length: 4 }).map((_, j) => (

))}

)}

))}

{/* Toolbar */}

setIsOpen(false)} >

); } export default function ImageEditorDemo() { return ; }