function CashRegisterLayout({ title, content }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[60%] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, content)); } function CashRegisterLayoutStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CashRegisterLayout, { title: "Item 1", content: "This is the content for item 1.", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CashRegisterLayout, { title: "Item 2", content: "This is the content for item 2.", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const listItems = [ { id: 1, title: "Item 1", content: "Detailed content for item 1", imgSrc: "/path/to/image1.jpg" }, { id: 2, title: "Item 2", content: "Detailed content for item 2", imgSrc: "/path/to/image2.jpg" }, { id: 3, title: "Item 3", content: "Detailed content for item 3", imgSrc: "/path/to/image3.jpg" } ]; const [selectedItem, setSelectedItem] = React.useState(listItems[0]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-row w-full h-full", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "w-[40%]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, listItems.map((item)=>{ const handleClick = ()=>setSelectedItem(item); return /*#__PURE__*/ React.createElement("li", { key: item.id, className: "border-b border-gray-200 p-4 flex cursor-pointer", onClick: handleClick, __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imgSrc, alt: `Image for ${item.title}`, className: "w-[40%] h-auto", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 pl-4", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, item.title))); })), /*#__PURE__*/ React.createElement(CashRegisterLayout, { title: selectedItem.title, content: selectedItem.content, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); }