function MainComponent() { const [counts, setCounts] = React.useState({ hundred: 0, fifty: 0, twenty: 0, ten: 0, five: 0, one: 0 }); const [total, setTotal] = React.useState(0); const handleChange = (e)=>{ setCounts({ ...counts, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); const calculatedTotal = counts.hundred * 100 + counts.fifty * 50 + counts.twenty * 20 + counts.ten * 10 + counts.five * 5 + counts.one; setTotal(calculatedTotal); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Banknote Counter"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/nominals/100.jpg", alt: "100 Dollar Bill", className: "w-[90px] h-[45px]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "images/nominals/50.jpg", alt: "50 Dollar Bill", className: "w-[90px] h-[45px]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "images/nominals/20.jpg", alt: "20 Dollar Bill", className: "w-[90px] h-[45px]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "images/nominals/10.jpg", alt: "10 Dollar Bill", className: "w-[90px] h-[45px]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "images/nominals/5.jpg", alt: "5 Dollar Bill", className: "w-[90px] h-[45px]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "images/nominals/1.jpg", alt: "1 Dollar Bill", className: "w-[90px] h-[45px]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("form", { className: "flex flex-wrap justify-center gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "hundred", placeholder: "Count of $100", className: "px-4 py-2 border rounded-md text-[#333]", value: counts.hundred, onChange: handleChange, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fifty", placeholder: "Count of $50", className: "px-4 py-2 border rounded-md text-[#333]", value: counts.fifty, onChange: handleChange, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "twenty", placeholder: "Count of $20", className: "px-4 py-2 border rounded-md text-[#333]", value: counts.twenty, onChange: handleChange, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "ten", placeholder: "Count of $10", className: "px-4 py-2 border rounded-md text-[#333]", value: counts.ten, onChange: handleChange, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "five", placeholder: "Count of $5", className: "px-4 py-2 border rounded-md text-[#333]", value: counts.five, onChange: handleChange, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "one", placeholder: "Count of $1", className: "px-4 py-2 border rounded-md text-[#333]", value: counts.one, onChange: handleChange, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 mt-4 bg-[#4CAF50] text-white rounded-md hover:bg-[#45a049]", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, "Total: $", total)); }