function MainComponent() { const [affiliates, setAffiliates] = React.useState([]); const [formValues, setFormValues] = React.useState({ affiliateName: '', affiliateURL: '', commissionRate: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormValues((prevValues)=>({ ...prevValues, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); const newAffiliate = { name: formValues.affiliateName, url: formValues.affiliateURL, commission: formValues.commissionRate }; setAffiliates((prevAffiliates)=>[ ...prevAffiliates, newAffiliate ]); setFormValues({ affiliateName: '', affiliateURL: '', commissionRate: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-center mb-8", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Affiliate Tracker"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "affiliateName", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Affiliate Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "affiliateName", id: "affiliateName", value: formValues.affiliateName, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "affiliateURL", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Affiliate URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "affiliateURL", id: "affiliateURL", value: formValues.affiliateURL, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "commissionRate", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Commission Rate (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "commissionRate", id: "commissionRate", value: formValues.commissionRate, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Affiliates List"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, affiliates.map((affiliate, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 82, columnNumber: 23 }, __self: this }, affiliate.name), /*#__PURE__*/ React.createElement("a", { href: affiliate.url, className: "text-sm text-blue-600", __source: { fileName: "", lineNumber: 83, columnNumber: 23 }, __self: this }, affiliate.url)), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, affiliate.commission, "%"))))))))); }