function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#fafafa] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "My eBooks"), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Add eBook")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center justify-between p-3 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./ebook-cover-1.jpg", alt: "Ebook cover for 'The Great Gatsby'", className: "w-16 h-24 mr-4 object-cover", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-800", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, "The Great Gatsby"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-light text-gray-600", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, "F. Scott Fitzgerald"))), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-700 font-medium", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Read")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }