function MainComponent() { const [canvasSize, setCanvasSize] = React.useState({ width: 500, height: 500 }); const [drawingData, setDrawingData] = React.useState(null); const handleCanvasSizeChange = (dimension, value)=>{ setCanvasSize((prevSize)=>({ ...prevSize, [dimension]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#FFFFFF] text-[#FFD700] font-comic-sans-ms", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center my-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "width", value: canvasSize.width, onChange: (e)=>handleCanvasSizeChange('width', e.target.value), className: "border border-[#87CEEB] w-[100px] mx-2", placeholder: "Width (mm)", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", value: canvasSize.height, onChange: (e)=>handleCanvasSizeChange('height', e.target.value), className: "border border-[#87CEEB] w-[100px] mx-2", placeholder: "Height (mm)", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border border-[#FFD700] my-4", style: { width: `${canvasSize.width}px`, height: `${canvasSize.height}px` }, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: "drawingCanvas", width: canvasSize.width, height: canvasSize.height, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 my-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#87CEEB] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "消しゴム"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#87CEEB] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "クリア"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#87CEEB] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFD700] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "保存")), /*#__PURE__*/ React.createElement("div", { className: "text-arial flex justify-center items-center space-x-4 my-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFD700] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "カットアウトガイド生成")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` #drawingCanvas { touch-action: none; background-color: #FFFFFF; } `)); }