function JapaneseAgreementButton({ buttonId, buttonText }) { return /*#__PURE__*/ React.createElement("button", { id: buttonId, className: "bg-[#007bff] text-white py-2 px-4 font-semibold hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function JapaneseAgreementButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseAgreementButton, { buttonId: "agreeButton", buttonText: "同意する", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { React.useEffect(()=>{ const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let drawing = false; const agreeButton = document.getElementById('agreeButton'); const signaturePad = document.getElementById('signaturePad'); const saveSignatureButton = document.getElementById('saveSignatureButton'); agreeButton.addEventListener('click', function() { signaturePad.classList.remove('hidden'); }); canvas.addEventListener('mousedown', function() { drawing = true; ctx.beginPath(); }); canvas.addEventListener('mouseup', function() { drawing = false; }); canvas.addEventListener('mousemove', function(event) { if (drawing) { ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } }); saveSignatureButton.addEventListener('click', function() { const signatureData = canvas.toDataURL('image/png'); fetch('/save-signature', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ signature: signatureData }) }).then((response)=>response.json()).then((data)=>{ console.log('Signature saved:', data); }).catch((error)=>{ console.error('Error saving signature:', error); }); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-md w-[90%] max-w-[600px] text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "契約書"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "ここに契約書の内容が入ります...")), /*#__PURE__*/ React.createElement(JapaneseAgreementButton, { buttonId: "agreeButton", buttonText: "同意する", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "signaturePad", className: "signature-pad mt-4 hidden", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { className: "border border-[#ccc] w-full h-[200px]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(JapaneseAgreementButton, { buttonId: "saveSignatureButton", buttonText: "署名を保存", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })))); }