function MainComponent() { const products = [ { id: 1, name: "Laptop Pro", price: "$1500", image: "/images/laptop_pro.png", description: "A high-end laptop suitable for gaming and professional work." }, { id: 2, name: "Desktop Master", price: "$2000", image: "/images/desktop_master.png", description: "A powerful desktop with latest-gen components." }, { id: 3, name: "Laptop Air", price: "$1200", image: "/images/laptop_air.png", description: "Lightweight laptop perfect for students and casual use." }, { id: 4, name: "Gaming Rig", price: "$2500", image: "/images/gaming_rig.png", description: "Top-of-the-line gaming rig for an immersive experience." }, { id: 5, name: "Workstation X", price: "$1800", image: "/images/workstation_x.png", description: "A powerful workstation for complex tasks." }, { id: 6, name: "Desktop Elite", price: "$2200", image: "/images/desktop_elite.png", description: "High-performance desktop for all your needs." }, { id: 7, name: "Ultra Laptop", price: "$1600", image: "/images/ultra_laptop.png", description: "A laptop that defines speed and efficiency." }, { id: 8, name: "Super Gaming Bundle", price: "$3000", image: "/images/super_gaming_bundle.png", description: "The ultimate gaming bundle." } ]; const [cart, setCart] = React.useState([]); const [view, setView] = React.useState('welcome'); const addToCart = (product)=>{ setCart([ ...cart, product ]); }; const renderWelcomePage = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f2f2f2]", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Welcome to Our Computer Shop"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Find the best computers for all your needs."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setView('shop'), className: "bg-green-500 hover:bg-green-700 text-white py-3 px-6 rounded text-lg font-roboto", name: "startShopping", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Start Shopping")); const renderShop = ()=>/*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-5", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-10 font-crimson-text", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Computer Shop"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, products.map((product)=>{ const altDescription = `Image of ${product.name}`; const cardClasses = "bg-white shadow-md rounded-lg p-4 flex flex-col items-center"; const imageClasses = "w-[200px] h-[150px] object-cover mb-4"; const nameClasses = "text-xl font-semibold mb-2 font-crimson-text"; const priceClasses = "text-xl font-bold mb-4 font-crimson-text"; const buttonClasses = "bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"; return /*#__PURE__*/ React.createElement("div", { key: product.id, className: cardClasses, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: altDescription, className: imageClasses, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: nameClasses, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("span", { className: priceClasses, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product), className: buttonClasses, name: "addToCart", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Add to Cart")); })), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-5 right-5 bg-white shadow-lg rounded-lg p-4 w-[300px]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Cart"), cart.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Your cart is empty.") : /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, cart.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-700 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, item.name, " - ", item.price))))); if (view === 'welcome') { return renderWelcomePage(); } else { return renderShop(); } }