function MainComponent() { const [discountCodes, setDiscountCodes] = React.useState([]); const [newCode, setNewCode] = React.useState(''); const [discountAmount, setDiscountAmount] = React.useState(''); const [validityPeriod, setValidityPeriod] = React.useState(''); const [usageLimit, setUsageLimit] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); const codeDetails = { code: newCode, discountAmount, validityPeriod, usageLimit }; setDiscountCodes([ ...discountCodes, codeDetails ]); setNewCode(''); setDiscountAmount(''); setValidityPeriod(''); setUsageLimit(''); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "my-4 mx-auto p-4 w-full max-w-[600px] bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold text-center mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Discount Codes"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "code", className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Code:"), /*#__PURE__*/ React.createElement("input", { id: "code", name: "code", type: "text", value: newCode, onChange: (e)=>setNewCode(e.target.value), className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "discountAmount", className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Discount Amount:"), /*#__PURE__*/ React.createElement("input", { id: "discountAmount", name: "discount_amount", type: "number", step: "0.01", value: discountAmount, onChange: (e)=>setDiscountAmount(e.target.value), className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "validityPeriod", className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Validity Period:"), /*#__PURE__*/ React.createElement("input", { id: "validityPeriod", name: "validity_period", type: "date", value: validityPeriod, onChange: (e)=>setValidityPeriod(e.target.value), className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "usageLimit", className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Usage Limit:"), /*#__PURE__*/ React.createElement("input", { id: "usageLimit", name: "usage_limit", type: "number", value: usageLimit, onChange: (e)=>setUsageLimit(e.target.value), className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-3 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Create Discount Code"))), /*#__PURE__*/ React.createElement("div", { className: "my-4 mx-auto w-full max-w-[800px]", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Existing Discount Codes"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full whitespace-nowrap", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "font-bold text-left", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Code"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Discount Amount"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "Validity Period"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Usage Limit"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, discountCodes.map(({ code, discountAmount, validityPeriod, usageLimit }, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-gray-100", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, code), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "$", discountAmount), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, validityPeriod), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, usageLimit)))))))); }