function MainComponent() { const [items, setItems] = React.useState([ { name: "Milk", image: "/images/milk.jpg" }, { name: "Eggs", image: "/images/eggs.jpg" }, { name: "Bread", image: "/images/bread.jpg" } ]); const [newItem, setNewItem] = React.useState(""); const [newItemImage, setNewItemImage] = React.useState(""); const addItem = (e)=>{ e.preventDefault(); if (!newItem.trim() || !newItemImage.trim()) return; setItems([ ...items, { name: newItem, image: newItemImage } ]); setNewItem(""); setNewItemImage(""); }; const removeItem = (index)=>{ setItems(items.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#333] mb-4 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Shopping List with Thumbnails"), /*#__PURE__*/ React.createElement("form", { className: "mb-6 w-full max-w-[400px]", onSubmit: addItem, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "itemName", placeholder: "Add new item", value: newItem, onChange: (e)=>setNewItem(e.target.value), className: "w-full p-2 border border-[#ccc] rounded-md mb-4 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "itemImage", placeholder: "Image URL", value: newItemImage, onChange: (e)=>setNewItemImage(e.target.value), className: "w-full p-2 border border-[#ccc] rounded-md mb-4 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white p-2 rounded-md hover:bg-[#0056b3] font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Add Item")), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center justify-between p-2 border-b border-[#ccc]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.name} thumbnail`, className: "w-20 h-20 mr-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto flex-1", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("button", { className: "text-red-600", onClick: ()=>removeItem(index), __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 49, columnNumber: 80 }, __self: this })))))); }