function DeleteButton({ onDelete, isAdmin }) { const handleClick = ()=>{ const password = prompt("パスワードを入力してください:"); if (password === "2525") { onDelete(); } else { alert("パスワードが間違っています。"); } }; if (!isAdmin) return null; return /*#__PURE__*/ React.createElement("button", { onClick: handleClick, className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), " 削除"); } function DeleteButtonStory() { const handleDelete = ()=>{ alert("削除が成功しました。"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DeleteButton, { onDelete: handleDelete, isAdmin: true, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DeleteButton, { onDelete: handleDelete, isAdmin: false, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function UserInputButton({ buttonText, onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-lg font-roboto hover:bg-blue-600", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function UserInputButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserInputButton, { buttonText: "投稿", onClick: ()=>alert("Submitted!"), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInputButton, { buttonText: "Submit", onClick: ()=>alert("Submitted!"), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tweets, setTweets] = React.useState([]); const [name, setName] = React.useState(''); const [content, setContent] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); if (name && content) { const newTweet = { id: Date.now(), name, content }; setTweets([ newTweet, ...tweets ]); setName(''); setContent(''); } }; const handleDelete = (id)=>{ const updatedTweets = tweets.filter((tweet)=>tweet.id !== id); setTweets(updatedTweets); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 bg-gray-100", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "リアルタイムつぶやきシステム"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2 font-roboto", htmlFor: "name", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "投稿者の名前"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-lg", type: "text", id: "name", name: "name", value: name, onChange: (e)=>setName(e.target.value), __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2 font-roboto", htmlFor: "content", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "投稿内容"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full px-3 py-2 border rounded-lg", id: "content", name: "content", rows: "3", value: content, onChange: (e)=>setContent(e.target.value), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(UserInputButton, { buttonText: "投稿", onClick: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, tweets.map((tweet)=>{ const handleDeleteClick = ()=>handleDelete(tweet.id); return /*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "bg-gray-50 p-4 rounded-lg shadow font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, tweet.name), /*#__PURE__*/ React.createElement(DeleteButton, { onDelete: handleDeleteClick, isAdmin: true, __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-800", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, tweet.content)); })))); }