function MainComponent() { const accounts = [ "アカウント1", "アカウント2" ]; const [tweets, setTweets] = React.useState([ { id: 1, account: "アカウント1", text: "サンプルツイート", image: "/path/to/image.jpg", video: "/path/to/video.mp4", time: "2023-10-30 10:00", enabled: true } ]); const [formState, setFormState] = React.useState({ account: accounts[0], tweet: "", image: null, video: null, time: "", enabled: true }); const handleFormChange = (e)=>{ const { name, value, files } = e.target; if (files) { setFormState((prevState)=>({ ...prevState, [name]: files[0] })); } else { setFormState((prevState)=>({ ...prevState, [name]: value })); } }; const addTweet = ()=>{ const newTweet = { id: tweets.length + 1, account: formState.account, text: formState.tweet, image: formState.image ? URL.createObjectURL(formState.image) : null, video: formState.video ? URL.createObjectURL(formState.video) : null, time: formState.time, enabled: formState.enabled }; setTweets((prevState)=>[ ...prevState, newTweet ]); }; const handleCheckboxChange = (id)=>{ setTweets(tweets.map((tweet)=>tweet.id === id ? { ...tweet, enabled: !tweet.enabled } : tweet)); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onChange: handleFormChange, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-bold text-gray-700", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "対象アカウント"), /*#__PURE__*/ React.createElement("select", { className: "p-2 border rounded", name: "account", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, accounts.map((account, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: account, __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, account)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-bold text-gray-700", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "ツイート文"), /*#__PURE__*/ React.createElement("textarea", { className: "p-2 border rounded", name: "tweet", maxLength: 280, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-right text-gray-500", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, `${formState.tweet.length}/280`)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-bold text-gray-700", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "投稿画像"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "p-2 border rounded", name: "image", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-bold text-gray-700", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "投稿動画"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "p-2 border rounded", name: "video", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-bold text-gray-700", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "配信時刻"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", className: "p-2 border rounded", name: "time", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: addTweet, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("table", { className: "min-w-full mt-8 bg-white border border-gray-200", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "アカウント"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "ツイート文"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "投稿画像"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "投稿動画"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "配信時刻"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "有効"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("tr", { key: tweet.id, className: "border-t", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, tweet.account), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, tweet.text), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, tweet.image && /*#__PURE__*/ React.createElement("img", { src: tweet.image, alt: "ツイート用画像", className: "w-16 h-16 object-cover", __source: { fileName: "", lineNumber: 116, columnNumber: 57 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, tweet.video && /*#__PURE__*/ React.createElement("video", { src: tweet.video, className: "w-16 h-16", controls: true, __source: { fileName: "", lineNumber: 117, columnNumber: 57 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, tweet.time), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: tweet.enabled, className: "form-checkbox", onChange: ()=>handleCheckboxChange(tweet.id), __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }))))))); }