function MainComponent() { const [burgerCount, setBurgerCount] = React.useState(0); const [friesCount, setFriesCount] = React.useState(0); const [sodaCount, setSodaCount] = React.useState(0); const handleAddItem = (item)=>{ if (item === 'burger') setBurgerCount(burgerCount + 1); if (item === 'fries') setFriesCount(friesCount + 1); if (item === 'soda') setSodaCount(sodaCount + 1); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 bg-[#f7f7f7] min-h-screen flex flex-col items-center justify-start", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-[#d63447] my-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Fast Food Orders"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 max-w-5xl w-full", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/burger.jpg", alt: "Juicy burger on a plate", className: "w-[200px] h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-[#36ae7c] text-white py-2 px-4 rounded-lg shadow", onClick: ()=>handleAddItem('burger'), __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Add Burger"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, burgerCount, " Burgers")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/fries.jpg", alt: "Crispy fries in a basket", className: "w-[200px] h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-[#f9c846] text-white py-2 px-4 rounded-lg shadow", onClick: ()=>handleAddItem('fries'), __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Add Fries"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, friesCount, " Fries")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/soda.jpg", alt: "Refreshing soda with ice and straw", className: "w-[200px] h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-[#eb5e55] text-white py-2 px-4 rounded-lg shadow", onClick: ()=>handleAddItem('soda'), __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Add Soda"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, sodaCount, " Sodas")))); }