function MainComponent() { const [secretKey, setSecretKey] = React.useState(''); const [url, setUrl] = React.useState(''); const [generatedCode, setGeneratedCode] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleKeyChange = (e)=>{ setSecretKey(e.target.value); }; const handleUrlChange = (e)=>{ setUrl(e.target.value); }; const handleGenerateCode = async ()=>{ setIsLoading(true); const response = await fetch('https://api.example.com/generate-code', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${secretKey}` }, body: JSON.stringify({ url }) }); const data = await response.json(); setGeneratedCode(data.code); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "secretKey", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "GPT-4 Secret Key"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "secretKey", name: "secretKey", value: secretKey, onChange: handleKeyChange, className: "w-full px-3 py-2 border border-[#ccc] rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "URL of the Non-RSS Support Page"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "url", name: "url", value: url, onChange: handleUrlChange, className: "w-full px-3 py-2 border border-[#ccc] rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateCode, className: "px-4 py-2 bg-[#0066cc] text-white rounded font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, isLoading ? 'Generating...' : 'Generate Code'), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Generated GAS JavaScript:"), /*#__PURE__*/ React.createElement("textarea", { readOnly: true, value: generatedCode, className: "w-full h-[250px] px-3 py-2 text-sm font-roboto border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); }