function MainComponent() { const [customers, setCustomers] = React.useState([ { id: 1, name: "John Doe", interactions: [ { type: "email", timestamp: "2023-10-01 10:00", detail: "Email about product inquiry" }, { type: "call", timestamp: "2023-10-02 14:00", detail: "Call discussion about pricing" }, { type: "zoom", timestamp: "2023-10-03 16:00", detail: "Zoom call about onboarding" } ] } ]); const [selectedCustomer, setSelectedCustomer] = React.useState(null); const handleCustomerClick = (customer)=>{ setSelectedCustomer(customer); }; return /*#__PURE__*/ React.createElement("div", { className: "flex p-4 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/3 p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Customers"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, customers.map((customer)=>/*#__PURE__*/ React.createElement("li", { key: customer.id, className: "cursor-pointer mb-2 p-2 border rounded", onClick: ()=>handleCustomerClick(customer), __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, customer.name)))), /*#__PURE__*/ React.createElement("div", { className: "w-2/3 p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, selectedCustomer ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, selectedCustomer.name), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, selectedCustomer.interactions.map((interaction, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, interaction.type), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, interaction.timestamp), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, interaction.detail))))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Please select a customer to see interactions"))); }