function MainComponent() { const [selectedProduct, setSelectedProduct] = React.useState(null); const [sidebarVisible, setSidebarVisible] = React.useState(false); const products = [ { id: 1, name: 'Product 1', deliveryDate: '2023-04-10' }, { id: 2, name: 'Product 2', deliveryDate: '2023-05-15' }, { id: 3, name: 'Product 3', deliveryDate: '2023-06-20' } ]; const handleProductClick = (product)=>{ setSelectedProduct(product); }; const toggleSidebar = ()=>{ setSidebarVisible(!sidebarVisible); }; let productRows = products.map((product)=>/*#__PURE__*/ React.createElement("tr", { key: product.id, onClick: ()=>handleProductClick(product), className: "cursor-pointer hover:bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, product.deliveryDate))); const sidebarImageStyle = { backgroundImage: "url('/sidebar-image.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "lg:hidden absolute m-4 p-2 text-white bg-[#282828] rounded", onClick: toggleSidebar, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, sidebarVisible ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-times", __source: { fileName: "", lineNumber: 29, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 29, columnNumber: 61 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `w-[250px] bg-[#282828] flex flex-col fixed h-full z-20 transform ${sidebarVisible ? 'translate-x-0' : '-translate-x-full'} ease-in-out transition-all duration-300 lg:translate-x-0 lg:static lg:z-auto`, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[200px]", style: sidebarImageStyle, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `flex-1 flex flex-col ${sidebarVisible ? 'lg:ml-[250px]' : 'ml-0'}`, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#424242] text-white", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 font-roboto text-left", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Product Name"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 font-roboto text-left", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Delivery Date"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, productRows))), selectedProduct && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row p-6 bg-white shadow", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 mb-4 lg:mb-0", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#121212] text-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Product Details"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Name: ", selectedProduct.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Delivery Date: ", selectedProduct.deliveryDate)), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { width: "100%", height: "300", frameBorder: "0", style: { border: 0 }, src: `https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Place`, allowFullScreen: true, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }))))); }

Product Name	Delivery Date
Product 1	2023-04-10
Product 2	2023-05-15
Product 3	2023-06-20