function MainComponent() { const [scale, setScale] = React.useState(1); const [zoom, setZoom] = React.useState(1); const [imageSrc, setImageSrc] = React.useState('./path/to/default-image.jpg'); const handleScaleChange = (event)=>{ setScale(event.target.value); }; const handleZoomChange = (event)=>{ setZoom(event.target.value); }; const handleImageChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImageSrc(reader.result); }; reader.readAsDataURL(file); }; const imageBoxStyle = { transform: `scale(${scale})`, zoom: zoom }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "scale-slider", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Scale"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "scale-slider", name: "scale", min: "0.5", max: "2", step: "0.1", value: scale, onChange: handleScaleChange, className: "w-full", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "zoom-slider", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Zoom"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "zoom-slider", name: "zoom", min: "1", max: "3", step: "0.1", value: zoom, onChange: handleZoomChange, className: "w-full", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] overflow-hidden bg-[#010101]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "User selected zoomable and scalable image", style: imageBoxStyle, className: "object-contain max-w-none", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "file", id: "image-upload", name: "image-upload", accept: "image/*", onChange: handleImageChange, className: "file:bg-[#f0f0f0] file:border-none file:px-4 file:py-2 file:text-sm file:font-semibold file:cursor-pointer file:rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this })); }