function MainComponent() { const [url, setUrl] = React.useState(''); const [qrCode, setQrCode] = React.useState(''); const handleGenerateQR = async ()=>{ const response = await fetch(`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(url)}`); const blob = await response.blob(); const qrCodeUrl = URL.createObjectURL(blob); setQrCode(qrCodeUrl); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "QRコード生成ツール"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", placeholder: "URLを入力してください", className: "w-full p-2 mb-4 border border-gray-300 rounded", value: url, onChange: (e)=>setUrl(e.target.value), __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 mb-4 bg-blue-500 text-white rounded", onClick: handleGenerateQR, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "QRコード生成"), qrCode && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] bg-gray-200 mb-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: qrCode, alt: "QRコードプレビュー", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: qrCode, className: "text-blue-500", download: "qrcode.jpg", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "JPG"), /*#__PURE__*/ React.createElement("a", { href: qrCode, className: "text-blue-500", download: "qrcode.png", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "PNG"), /*#__PURE__*/ React.createElement("a", { href: qrCode, className: "text-blue-500", download: "qrcode.pdf", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "PDF"), /*#__PURE__*/ React.createElement("a", { href: qrCode, className: "text-blue-500", download: "qrcode.eps", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "EPS"))))); }