function InteractiveDocumentDisplay({ documents }) { const [visibleDocId, setVisibleDocId] = React.useState(null); const handleClick = (id)=>{ setVisibleDocId((prevId)=>prevId === id ? null : id); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleClick("half-pocket"), className: "relative w-[300px] h-[150px] bg-gray-300 cursor-pointer flex items-center justify-center", id: "half-pocket", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Click to View Documents")), documents.map(({ id, title, content })=>/*#__PURE__*/ React.createElement("div", { key: id, className: `${visibleDocId === id ? "block" : "hidden"} bg-white shadow-md rounded-lg mt-4 p-4`, style: { transform: visibleDocId === id ? "translateY(0)" : "translateY(-50px)", transition: "transform 0.3s ease-in-out" }, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, content)))); } function InteractiveDocumentDisplayStory() { const documents = [ { id: 1, title: "Document 1", content: "Content for Document 1" }, { id: 2, title: "Document 2", content: "Content for Document 2" }, { id: 3, title: "Document 3", content: "Content for Document 3" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InteractiveDocumentDisplay, { documents: documents, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const documents = [ { id: 1, title: "Document 1", content: "Content for Document 1" }, { id: 2, title: "Document 2", content: "Content for Document 2" }, { id: 3, title: "Document 3", content: "Content for Document 3" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-white", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InteractiveDocumentDisplay, { documents: documents, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); }