function MainComponent() { const [category, setCategory] = React.useState('voting'); const handleCategoryChange = (event)=>{ setCategory(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-8 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-crimson-text mb-8", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "Webアプリケーション"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "名前:", /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "カテゴリを選択:", /*#__PURE__*/ React.createElement("select", { name: "category", value: category, onChange: handleCategoryChange, className: "border p-2 w-full", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "voting", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "人気投票"), /*#__PURE__*/ React.createElement("option", { value: "shopping", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "ショッピングカート"), /*#__PURE__*/ React.createElement("option", { value: "diary", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "web日記"), /*#__PURE__*/ React.createElement("option", { value: "todo", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "ToDoリスト・マネージャ"), /*#__PURE__*/ React.createElement("option", { value: "game", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "ゲーム"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 w-full max-w-2xl space-y-8", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, category === 'voting' && /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "人気投票"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "選択肢を選んでください:"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "vote", value: "option1", className: "mr-2", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }), "選択肢1"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "vote", value: "option2", className: "mr-2", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }), "選択肢2"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "vote", value: "option3", className: "mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }), "選択肢3"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "投票"))), category === 'shopping' && /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "ショッピングカート"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "商品1 - ¥1000"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "商品2 - ¥2000"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "商品3 - ¥3000")), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "決済")), category === 'diary' && /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "web日記"), /*#__PURE__*/ React.createElement("textarea", { name: "diary", className: "w-full h-[200px] border p-2 mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "保存")), category === 'todo' && /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "ToDoリスト・マネージャ"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "ToDo項目1 - ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 81, columnNumber: 29 }, __self: this }, "締切: 明日")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "ToDo項目2 - ", /*#__PURE__*/ React.createElement("span", { className: "text-yellow-500", __source: { fileName: "", lineNumber: 82, columnNumber: 29 }, __self: this }, "締切: 来週")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "ToDo項目3 - ", /*#__PURE__*/ React.createElement("span", { className: "text-green-500", __source: { fileName: "", lineNumber: 83, columnNumber: 29 }, __self: this }, "締切: まだ先"))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "追加")), category === 'game' && /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "ゲーム"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "じゃんけんする")))); }