function MainComponent() { const [modalContent, setModalContent] = React.useState(null); const handleDetailClick = (content)=>{ setModalContent(content); }; const closeModal = ()=>{ setModalContent(null); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600 text-white p-4 shadow-md", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "レシピ共有サイト"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#recipe-search", className: "hover:underline", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "レシピ検索"), /*#__PURE__*/ React.createElement("a", { href: "#review-search", className: "hover:underline", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "口コミ検索"), /*#__PURE__*/ React.createElement("a", { href: "#user-search", className: "hover:underline", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "ユーザ検索")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow container mx-auto py-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "検索...", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-4 rounded mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Sample Recipe Title"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Sample Description..."), /*#__PURE__*/ React.createElement("button", { className: "mt-2 text-blue-500 hover:underline", onClick: ()=>handleDetailClick("Sample Recipe Title detail"), __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "詳細を見る")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded mx-1", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "前へ"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded mx-1", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "次へ")))), modalContent && /*#__PURE__*/ React.createElement("div", { className: "modal fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center", onClick: closeModal, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "modal-content bg-white p-6 rounded shadow-lg", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "modal-close text-red-500 cursor-pointer text-2xl", onClick: closeModal, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, modalContent), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, modalContent, "の詳細情報...")))); }