function MainComponent() { const [url, setUrl] = React.useState(""); const [campaignSource, setCampaignSource] = React.useState(""); const [campaignMedium, setCampaignMedium] = React.useState(""); const [campaignName, setCampaignName] = React.useState(""); const [campaignTerm, setCampaignTerm] = React.useState(""); const [campaignContent, setCampaignContent] = React.useState(""); const [generatedLink, setGeneratedLink] = React.useState(""); const handleGenerateLink = ()=>{ const params = new URLSearchParams(); if (campaignSource) params.append("utm_source", campaignSource); if (campaignMedium) params.append("utm_medium", campaignMedium); if (campaignName) params.append("utm_campaign", campaignName); if (campaignTerm) params.append("utm_term", campaignTerm); if (campaignContent) params.append("utm_content", campaignContent); const baseUrl = new URL(url); baseUrl.search = params.toString(); setGeneratedLink(baseUrl.toString()); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "UTM Link Generator"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "url", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "URL"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", name: "url", id: "url", placeholder: "Enter URL", value: url, onChange: (e)=>setUrl(e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "campaignSource", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Campaign Source"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", name: "campaignSource", id: "campaignSource", placeholder: "utm_source", value: campaignSource, onChange: (e)=>setCampaignSource(e.target.value), __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "campaignMedium", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Campaign Medium"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", name: "campaignMedium", id: "campaignMedium", placeholder: "utm_medium", value: campaignMedium, onChange: (e)=>setCampaignMedium(e.target.value), __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "campaignName", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Campaign Name"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", name: "campaignName", id: "campaignName", placeholder: "utm_campaign", value: campaignName, onChange: (e)=>setCampaignName(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "campaignTerm", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Campaign Term"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", name: "campaignTerm", id: "campaignTerm", placeholder: "utm_term (optional)", value: campaignTerm, onChange: (e)=>setCampaignTerm(e.target.value), __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "campaignContent", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Campaign Content"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", type: "text", name: "campaignContent", id: "campaignContent", placeholder: "utm_content (optional)", value: campaignContent, onChange: (e)=>setCampaignContent(e.target.value), __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleGenerateLink, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Generate UTM Link"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 font-roboto", htmlFor: "resultLink", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "UTM Link"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg bg-gray-200", type: "text", id: "resultLink", readOnly: true, value: generatedLink, __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this })))); }