function MainComponent({ items }) { const handleClick = (id, currentToggleStatus)=>{ fetch('/api/db/items-21', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `items` SET `toggle_added` = ? WHERE `id` = ?', values: [ !currentToggleStatus, id ] }) }).then(()=>{ window.location.reload(); }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, items.map((item)=>{ const buttonIcon = item.toggleAdded ? 'fa fa-check' : 'fa fa-plus'; const buttonColor = item.toggleAdded ? 'bg-green-500' : 'bg-blue-500'; return /*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex items-center justify-between p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, item.type), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "Aisle ", item.aisle)), /*#__PURE__*/ React.createElement("button", { className: `rounded-full w-[40px] h-[40px] text-white ${buttonColor}`, onClick: ()=>handleClick(item.id, item.toggleAdded), __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: buttonIcon, __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }))); }))); } function StoryComponent() { const sampleItems = [ { id: 1, type: 'Apples', aisle: 1, toggleAdded: false }, { id: 2, type: 'Bread', aisle: 2, toggleAdded: true }, { id: 3, type: 'Chicken', aisle: 3, toggleAdded: false } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { items: sampleItems, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); }