function MainComponent() { const [familyMembers, setFamilyMembers] = React.useState([]); const [newMemberName, setNewMemberName] = React.useState(""); const [newMemberAge, setNewMemberAge] = React.useState(""); React.useEffect(()=>{ fetch('/api-proxy/family-task-management-api/family-members').then((response)=>response.json()).then((data)=>setFamilyMembers(data)); }, []); const addFamilyMember = ()=>{ const userId = "example_user_id"; // Replace with actual user ID logic const member = { name: newMemberName, age: parseInt(newMemberAge, 10), user_id: userId }; fetch('/api-proxy/family-task-management-api/family-members', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(member) }).then((response)=>response.json()).then((newMember)=>setFamilyMembers([ ...familyMembers, newMember ])); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Family Members"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-4 font-noto-sans", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, familyMembers.map((member)=>/*#__PURE__*/ React.createElement("li", { key: member.member_id, className: "w-[123px] font-noto-sans-adlam-unjoined", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, member.name, " - ", member.age, " years old"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-[123px]", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Add New Member"), /*#__PURE__*/ React.createElement("input", { name: "newMemberName", type: "text", placeholder: "Name", className: "border rounded p-2 mr-2", value: newMemberName, onChange: (e)=>setNewMemberName(e.target.value), __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "newMemberAge", type: "number", placeholder: "Age", className: "border rounded p-2 mr-2", value: newMemberAge, onChange: (e)=>setNewMemberAge(e.target.value), __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addFamilyMember, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Add Member"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); }