function MainComponent() { const bookCards = [ { src: 'path-to-your-first-book-image.jpg', title: '書店への道', author: '著者名' }, { src: 'path-to-your-second-book-image.jpg', title: '君が昔を続けていれば', author: '著者名' }, { src: 'path-to-your-third-book-image.jpg', title: '人間の土', author: '著者名' }, { src: 'path-to-your-fourth-book-image.jpg', title: '小さな祖国の歌', author: '著者名' } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] min-h-screen", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center py-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212] font-bold", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "1CHIBON")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-5", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search text-lg text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#121212] hidden md:inline", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "キーワードを入力...", className: "p-2 w-56 bg-white rounded border border-[#ccc] focus:ring-2 focus:ring-[#007bff]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#121212] hidden lg:inline", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "新刊の人気"), /*#__PURE__*/ React.createElement("span", { className: "text-[#121212] hidden lg:inline", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "1番売れた本"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter text-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-instagram text-[#121212] ml-3", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-tiktok text-[#121212] ml-3", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "my-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, bookCards.map((book, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow-lg rounded-lg text-center transform transition duration-300 hover:-translate-y-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.src, alt: `${book.title} book cover`, className: "w-full h-auto mx-auto mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#666]", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, book.author)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, ` header .fa-search { cursor: pointer; } header input:focus { outline: none; } main .hover\\:-translate-y-2:hover { transform: translateY(-0.5rem); } `)); }