function MainComponent() { const [utmData, setUtmData] = React.useState({ url: 'https://', source: '', medium: '', content: '', term: '' }); const [activePreset, setActivePreset] = React.useState('individual'); const handleFocus = (event)=>{ if (event.target.name === 'url' && event.target.value === 'https://') { event.target.value = ''; } }; const handleInput = (event)=>{ const { name, value } = event.target; setUtmData((prevData)=>({ ...prevData, [name]: name === 'url' && value === '' ? 'https://' : value })); }; const handlePreset = (preset)=>()=>{ setActivePreset(preset); let presetData = { url: 'https://', source: '', medium: '', content: '', term: '' }; switch(preset){ case 'facebook': presetData.source = 'facebook'; presetData.medium = 'social'; break; case 'gmb': presetData.source = 'gmblisting'; presetData.medium = 'organic'; break; case 'applemaps': presetData.source = 'AppleMaps'; presetData.medium = 'organic'; break; default: break; } setUtmData(presetData); }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(constructUtmLink()); }; const constructUtmLink = ()=>{ const { url, source, medium, content, term } = utmData; let utmLink = url; const utmParams = [ `utm_source=${source}`, `utm_medium=${medium}`, `utm_content=${content}`, `utm_term=${term}` ].filter((param)=>param.includes('=')).join('&'); if (utmParams) utmLink += `?${utmParams}`; return utmLink; }; const utmLink = constructUtmLink(); const showField = (field)=>{ return activePreset === 'individual' || activePreset !== 'gmb' && activePreset !== 'applemaps' && field !== 'url'; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-white px-4 py-6", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#37394E] font-bold text-2xl mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "DigitalResults"), /*#__PURE__*/ React.createElement("h2", { className: "text-[#37394E] font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "UTM Link Generator"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] md:max-w-[25%]", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "preset-btn", onClick: handlePreset('individual'), __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Individual"), /*#__PURE__*/ React.createElement("button", { className: "preset-btn", onClick: handlePreset('facebook'), __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Facebook"), /*#__PURE__*/ React.createElement("button", { className: "preset-btn", onClick: handlePreset('gmb'), __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "GMB"), /*#__PURE__*/ React.createElement("button", { className: "preset-btn", onClick: handlePreset('applemaps'), __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "AppleMaps"), showField('source') && /*#__PURE__*/ React.createElement("select", { name: "source", value: utmData.source, onChange: handleInput, className: "block w-full p-2 mt-4 border rounded border-[#e2e8f0] text-[#A0AEC0] bg-white", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Select source..."), /*#__PURE__*/ React.createElement("option", { value: "newsletter", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "newsletter"), /*#__PURE__*/ React.createElement("option", { value: "twitter", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "twitter"), /*#__PURE__*/ React.createElement("option", { value: "linkedIn", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "LinkedIn"), /*#__PURE__*/ React.createElement("option", { value: "facebook", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "facebook"), /*#__PURE__*/ React.createElement("option", { value: "blog", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "blog"), /*#__PURE__*/ React.createElement("option", { value: "tiktok", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "tiktok")), showField('medium') && /*#__PURE__*/ React.createElement("select", { name: "medium", value: utmData.medium, onChange: handleInput, className: "block w-full p-2 mt-4 border rounded border-[#e2e8f0] text-[#A0AEC0] bg-white", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Select medium..."), /*#__PURE__*/ React.createElement("option", { value: "email", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "email"), /*#__PURE__*/ React.createElement("option", { value: "social", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "social")), showField('content') && /*#__PURE__*/ React.createElement("input", { name: "content", value: utmData.content, onChange: handleInput, onFocus: handleFocus, className: `block w-full p-2 mt-4 border rounded ${activePreset === 'gmb' && utmData.url === 'https://' ? 'bg-red-200' : 'border-[#e2e8f0]'} text-[#A0AEC0] bg-white`, placeholder: "Enter content (Optional)", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), showField('term') && /*#__PURE__*/ React.createElement("input", { name: "term", value: utmData.term, onChange: handleInput, onFocus: handleFocus, className: "block w-full p-2 mt-4 border rounded border-[#e2e8f0] text-[#A0AEC0] bg-white", placeholder: "Enter term (Optional)", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "url", value: utmData.url, onChange: handleInput, onFocus: handleFocus, className: "block w-full p-2 mt-4 border rounded border-[#e2e8f0] text-[#A0AEC0] bg-white", placeholder: "https://", required: true, __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 p-2 border rounded border-[#e2e8f0]", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, utmLink), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "mt-4 w-full bg-[#6171FF] text-white rounded p-2", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "Copy UTM Link")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, ` .preset-btn { background-color: #6171FF; color: white; padding: 4px 8px; margin-right: 4px; font-size: 0.875rem; } `)); }