function MainComponent() { const products = [ { title: "PC Portable Gamer HP VICTUS", price: "7490 DH", imageSrc: "products/gamer-hp-victus.jpg", specs: [ "16GB RAM", "1TB SSD", "NVIDIA RTX 3060" ] }, { title: "PC Portable Gamer HP VICTUS", price: "2190 DH", imageSrc: "products/gamer-hp-victus-variant.jpg", specs: [ "8GB RAM", "512GB SSD", "NVIDIA GTX 1650" ] }, { title: "Pc Portable Chromebook Acer", price: "3640 DH", imageSrc: "products/chromebook-acer.jpg", specs: [ "4GB RAM", "64GB eMMC", "Intel UHD Graphics" ] }, { title: "PC Portable - HUAWEI", price: "1270 DH", imageSrc: "products/huawei-laptop.jpg", specs: [ "8GB RAM", "256GB SSD", "Integrated Graphics" ] } ]; const [selectedProduct, setSelectedProduct] = React.useState(null); const handleProductClick = (product)=>{ setSelectedProduct(product); }; const renderProductDetails = (product)=>{ return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl text-[#121212] mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, product.title), /*#__PURE__*/ React.createElement("img", { src: product.imageSrc, alt: `Laptop ${product.title}`, className: "w-[300px] h-[200px] mb-4 self-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#FF0000]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, product.specs.map((spec, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, spec))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#e0e0e0] text-black py-2 px-4 border border-gray-300 rounded self-start mt-4", onClick: ()=>setSelectedProduct(null), __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Retour")); }; if (selectedProduct) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 bg-[#f0f0f0] h-screen flex justify-center items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, renderProductDetails(selectedProduct)); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-center text-[#121212] mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Ordinateurs portables"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 border border-gray-300 shadow-sm flex flex-col items-center h-[400px]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imageSrc, alt: `Laptop ${product.title}`, className: "w-[200px] h-[150px] mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#000000] mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, product.title), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#FF0000] mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("button", { className: "bg-[#e0e0e0] text-black py-2 px-4 border border-gray-300 rounded", onClick: ()=>handleProductClick(product), __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Ajouter au panier"))))); }