function MainComponent() { const [tweet, setTweet] = React.useState(""); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const topic = formData.get("topic"); const length = formData.get("length"); const generatedTweet = `This is a generated tweet about ${topic} with a length of ${length} characters.`; setTweet(generatedTweet); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#00acee] flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Twitterの投稿文を考えてくれるツール"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "topic", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "投稿のテーマ"), /*#__PURE__*/ React.createElement("input", { name: "topic", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "topic", type: "text", placeholder: "例: 技術、ライフスタイル", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "length", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "希望の文字数"), /*#__PURE__*/ React.createElement("input", { name: "length", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "length", type: "number", min: "1", max: "280", placeholder: "1-280", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#00acee] hover:bg-[#008bbd] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "生成する")), tweet && /*#__PURE__*/ React.createElement("p", { className: "mt-4 p-4 bg-gray-100 rounded text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, tweet))); }