function FlatBudgetTracker({ isLoggedIn, username, password, setUsername, setPassword, handleLogin, handleAddMember, handleAddCategory, handleSetBudget, members, categories, budget }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 max-w-md w-full", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Flat Budget Tracker"), !isLoggedIn ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", value: username, onChange: (e)=>setUsername(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Login")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddMember, className: "space-y-2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "member", placeholder: "Add member", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Add Member")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddCategory, className: "space-y-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "category", placeholder: "Add category", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Add Category")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSetBudget, className: "space-y-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "budget", placeholder: "Set budget", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Set Budget")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Members:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, members.map((member, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, member)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Categories:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, category)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Budget:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "£", budget.toFixed(2))))); } function FlatBudgetTrackerStory() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [members, setMembers] = React.useState([]); const [categories, setCategories] = React.useState([]); const [budget, setBudget] = React.useState(0); const handleLogin = (e)=>{ e.preventDefault(); setIsLoggedIn(true); }; const handleAddMember = (e)=>{ e.preventDefault(); const newMember = e.target.member.value; setMembers([ ...members, newMember ]); }; const handleAddCategory = (e)=>{ e.preventDefault(); const newCategory = e.target.category.value; setCategories([ ...categories, newCategory ]); }; const handleSetBudget = (e)=>{ e.preventDefault(); const newBudget = parseFloat(e.target.budget.value); setBudget(newBudget); }; return /*#__PURE__*/ React.createElement(FlatBudgetTracker, { isLoggedIn: isLoggedIn, username: username, password: password, setUsername: setUsername, setPassword: setPassword, handleLogin: handleLogin, handleAddMember: handleAddMember, handleAddCategory: handleAddCategory, handleSetBudget: handleSetBudget, members: members, categories: categories, budget: budget, __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }); } function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [members, setMembers] = React.useState([]); const [categories, setCategories] = React.useState([]); const [budget, setBudget] = React.useState(0); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const handleLogin = (e)=>{ e.preventDefault(); if (username && password) { setIsLoggedIn(true); } }; const handleAddMember = (e)=>{ e.preventDefault(); const newMember = e.target.member.value; if (newMember) { setMembers([ ...members, newMember ]); e.target.member.value = ''; } }; const handleAddCategory = (e)=>{ e.preventDefault(); const newCategory = e.target.category.value; if (newCategory) { setCategories([ ...categories, newCategory ]); e.target.category.value = ''; } }; const handleSetBudget = (e)=>{ e.preventDefault(); const newBudget = parseFloat(e.target.budget.value); if (!isNaN(newBudget)) { setBudget(newBudget); e.target.budget.value = ''; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center font-sans", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 max-w-md w-full", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Flat Budget Tracker"), !isLoggedIn ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", value: username, onChange: (e)=>setUsername(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Login")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddMember, className: "space-y-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "member", placeholder: "Add member", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Add Member")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddCategory, className: "space-y-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "category", placeholder: "Add category", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Add Category")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSetBudget, className: "space-y-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "budget", placeholder: "Set budget", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "Set Budget")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Members:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, members.map((member, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, member)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Categories:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, category)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "Budget:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "£", budget.toFixed(2)))))); }