function EmailInputField({ name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "email", name: name, placeholder: placeholder, className: "w-full p-2 border border-gray-300 rounded mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function EmailInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EmailInputField, { name: "subscriber_email", placeholder: "Enter subscriber email", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [subscribers, setSubscribers] = React.useState([]); const [emailSubject, setEmailSubject] = React.useState(''); const [emailBody, setEmailBody] = React.useState(''); const [trackableLink, setTrackableLink] = React.useState(''); const [reports, setReports] = React.useState([]); const addSubscriber = (email)=>{ setSubscribers([ ...subscribers, email ]); }; const sendEmail = ()=>{ const report = { subject: emailSubject, body: emailBody, trackableLink: trackableLink, opened: Math.floor(Math.random() * subscribers.length), clicked: Math.floor(Math.random() * subscribers.length) }; setReports([ ...reports, report ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Email Marketing App"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Create Opt-In Mailing List"), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: (e)=>{ e.preventDefault(); addSubscriber(e.target.subscriber_email.value); }, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(EmailInputField, { name: "subscriber_email", placeholder: "Enter subscriber email", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-600 text-white rounded", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Add to List"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Send Email Mailing"), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: (e)=>{ e.preventDefault(); sendEmail(); }, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "email_subject", placeholder: "Email Subject", className: "w-full p-2 border border-gray-300 rounded mb-4", value: emailSubject, onChange: (e)=>setEmailSubject(e.target.value), required: true, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "email_body", rows: "6", placeholder: "Email Body", className: "w-full p-2 border border-gray-300 rounded mb-4", value: emailBody, onChange: (e)=>setEmailBody(e.target.value), required: true, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "url", name: "tracking_url", placeholder: "Trackable Link", className: "w-full p-2 border border-gray-300 rounded mb-4", value: trackableLink, onChange: (e)=>setTrackableLink(e.target.value), required: true, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-green-600 text-white rounded", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Send Email"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Reports"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, reports.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "No reports available yet. Check back after sending some emails.") : reports.map((report, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, report.subject), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, report.body), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "Opened: ", report.opened, " times"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "Clicked: ", report.clicked, " times"), /*#__PURE__*/ React.createElement("a", { href: report.trackableLink, className: "text-blue-600 underline", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, "Trackable Link")))))); }