function MainComponent() { const [posts, setPosts] = React.useState([]); const [title, setTitle] = React.useState(""); const [content, setContent] = React.useState(""); const [user, setUser] = React.useState(""); const [password, setPassword] = React.useState(""); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const handleLogin = (e)=>{ e.preventDefault(); if (user === "admin" && password === "admin") { setIsLoggedIn(true); } else { alert("認証失敗"); } setUser(""); setPassword(""); }; const handleSubmit = (e)=>{ e.preventDefault(); if (!title || !content) return; const newPost = { title, content }; setPosts([ newPost, ...posts ]); setTitle(""); setContent(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F4F4F4] font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFFFFF] shadow-md py-4 flex justify-between items-center px-5", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-xl lg:text-3xl", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "川柳投稿サイト"), !isLoggedIn && /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "flex space-x-3 items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "user", placeholder: "ユーザー名", value: user, onChange: (e)=>setUser(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "パスワード", value: password, onChange: (e)=>setPassword(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "ログイン"))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center py-8", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-[600px] p-4 bg-white shadow-md rounded-lg my-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", id: "title", value: title, onChange: (e)=>setTitle(e.target.value), placeholder: "タイトルを入力", className: "bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "content", className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "川柳"), /*#__PURE__*/ React.createElement("textarea", { name: "content", id: "content", value: content, onChange: (e)=>setContent(e.target.value), rows: "3", placeholder: "川柳を入力", className: "bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "投稿"))), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#121212] my-4", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "最新の投稿"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white p-4 my-2 shadow rounded-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, post.content)))))))); }