function ClickableListItem({ title, isSelected, onSelect }) { return /*#__PURE__*/ React.createElement("li", { className: `mb-2 cursor-pointer hover:bg-[#EDEDED] p-2 ${isSelected ? 'bg-[#E2E8F0]' : ''}`, onClick: onSelect, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "📒 ", title); } function ClickableListItemStory() { const handleClick = ()=>console.log("Item selected"); return /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableListItem, { title: "Project A", isSelected: false, onSelect: handleClick, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ClickableListItem, { title: "Project B", isSelected: true, onSelect: handleClick, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ClickableListItem, { title: "Project C", isSelected: false, onSelect: handleClick, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedIndex, setSelectedIndex] = React.useState(0); const projects = [ { title: "Project 1", content: "Details and notes about Project 1." }, { title: "Project 2", content: "Details and notes about Project 2." }, { title: "Project 3", content: "Details and notes about Project 3." } ]; const handleSelect = (index)=>{ setSelectedIndex(index); }; const selectedProject = projects[selectedIndex]; return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full flex overflow-hidden bg-[#F5F7FA]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#FFFFFF] p-4 border-r border-[#E0E0E0]", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Workspace"), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto text-[#666] text-base", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, projects.map((project, index)=>/*#__PURE__*/ React.createElement(ClickableListItem, { key: index, title: project.title, isSelected: selectedIndex === index, onSelect: ()=>handleSelect(index), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-3xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, selectedProject.title), /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] shadow p-4 rounded", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-[#666] mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Page Content"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm text-[#999]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, selectedProject.content)))); }