function ContentManagementSystem({ onRegister, onLogin, onSaveArticle, onEditArticle, onDeleteArticle, onCreateNewArticle, handleForgotPassword, handleNewRegistration, handleEditArticle, handleDeleteArticle, articleList }) { const inputStyles = "block border p-2 mt-2 mb-4 w-full"; const buttonStyles = "bg-blue-500 text-white py-2 px-4 rounded mt-2 mb-4 w-full"; const linkStyles = "text-blue-500 hover:underline mt-2 mb-4 inline-block"; const editorButtonStyles = "text-white py-2 px-4 rounded mt-2 mb-4"; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto my-10", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-5", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "ユーザー登録"), /*#__PURE__*/ React.createElement("form", { onSubmit: onRegister, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: inputStyles, type: "text", name: "username", placeholder: "ユーザー名", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: inputStyles, type: "email", name: "email", placeholder: "メールアドレス", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: inputStyles, type: "password", name: "password", placeholder: "パスワード", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: inputStyles, type: "password", name: "confirmPassword", placeholder: "パスワードの確認", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "agree", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "プライバシーポリシーと利用規約に同意する")), /*#__PURE__*/ React.createElement("button", { className: buttonStyles, type: "submit", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "登録"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto my-10", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-5", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("form", { onSubmit: onLogin, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: inputStyles, type: "text", name: "identifier", placeholder: "メールアドレスまたはユーザー名", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: inputStyles, type: "password", name: "password", placeholder: "パスワード", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "#", className: linkStyles, onClick: handleForgotPassword, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "パスワードをお忘れですか"), /*#__PURE__*/ React.createElement("button", { className: buttonStyles, type: "submit", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("a", { href: "#", className: linkStyles, onClick: handleNewRegistration, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "新規登録"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto my-10", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-5", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "記事作成/編集"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 m-2 bg-gray-100 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("button", { className: "p-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "I"), /*#__PURE__*/ React.createElement("button", { className: "p-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "U"), /*#__PURE__*/ React.createElement("button", { className: "p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "UL")), /*#__PURE__*/ React.createElement("textarea", { className: inputStyles + " min-h-48 w-full", name: "articleContent", placeholder: "記事内容を入力...", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-5 m-5 border-2 border-dashed border-gray-300 rounded text-center text-gray-500", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "ここに画像をドラッグ&ドロップ"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: inputStyles, name: "videoLink", placeholder: "動画リンクを入力...", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `${editorButtonStyles} bg-blue-500`, type: "button", onClick: onSaveArticle, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "保存"), /*#__PURE__*/ React.createElement("button", { className: `${editorButtonStyles} bg-green-500`, type: "button", onClick: onEditArticle, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { className: `${editorButtonStyles} bg-red-500`, type: "button", onClick: onDeleteArticle, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "削除")), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto my-10", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-5", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "記事リスト"), /*#__PURE__*/ React.createElement("button", { className: buttonStyles, type: "button", onClick: onCreateNewArticle, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "新規記事作成"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, articleList.map((article, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-3 m-1 border-b border-gray-200", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, article.title, " - ", article.createdAt))), /*#__PURE__*/ React.createElement("button", { className: `${editorButtonStyles} bg-green-500`, type: "button", onClick: handleEditArticle, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "記事編集"), /*#__PURE__*/ React.createElement("button", { className: `${editorButtonStyles} bg-red-500`, type: "button", onClick: handleDeleteArticle, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "記事削除"))); } function ContentManagementSystemStory() { const articleList = [ { title: "記事のタイトル1", createdAt: "2023-10-01" }, { title: "記事のタイトル2", createdAt: "2023-10-02" }, { title: "記事のタイトル3", createdAt: "2023-10-03" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ContentManagementSystem, { onRegister: (e)=>e.preventDefault(), onLogin: (e)=>e.preventDefault(), onSaveArticle: ()=>console.log('Article Saved'), onEditArticle: ()=>console.log('Article Edited'), onDeleteArticle: ()=>console.log('Article Deleted'), onCreateNewArticle: ()=>console.log('New Article Created'), handleForgotPassword: ()=>console.log('Forgot Password'), handleNewRegistration: ()=>console.log('New Registration'), handleEditArticle: ()=>console.log('Edit Article'), handleDeleteArticle: ()=>console.log('Delete Article'), articleList: articleList, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleRegister = (e)=>e.preventDefault(); const handleLogin = (e)=>e.preventDefault(); const handleSaveArticle = ()=>console.log('Article Saved'); const handleEditArticle = ()=>console.log('Article Edited'); const handleDeleteArticle = ()=>console.log('Article Deleted'); const handleCreateNewArticle = ()=>console.log('New Article Created'); const handleForgotPassword = ()=>console.log('Forgot Password'); const handleNewRegistration = ()=>console.log('New Registration'); const handleEditArticleFromList = ()=>console.log('Edit Article'); const handleDeleteArticleFromList = ()=>console.log('Delete Article'); const articleList = [ { title: "記事のタイトル1", createdAt: "2023-10-01" }, { title: "記事のタイトル2", createdAt: "2023-10-02" }, { title: "記事のタイトル3", createdAt: "2023-10-03" } ]; return /*#__PURE__*/ React.createElement(ContentManagementSystem, { onRegister: handleRegister, onLogin: handleLogin, onSaveArticle: handleSaveArticle, onEditArticle: handleEditArticle, onDeleteArticle: handleDeleteArticle, onCreateNewArticle: handleCreateNewArticle, handleForgotPassword: handleForgotPassword, handleNewRegistration: handleNewRegistration, handleEditArticle: handleEditArticleFromList, handleDeleteArticle: handleDeleteArticleFromList, articleList: articleList, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }); }