function MainComponent() { const [selected, setSelected] = React.useState(""); const [preference, setPreference] = React.useState(""); const [text, setText] = React.useState(""); const [customPreference, setCustomPreference] = React.useState([]); const [catCount, setCatCount] = React.useState(0); const [dogCount, setDogCount] = React.useState(0); const handleButtonClick = (value)=>{ setSelected(value); }; const handlePreferenceChange = (value)=>{ setPreference(value); if (value === "cats") { setCatCount(catCount + 1); } else if (value === "dogs") { setDogCount(dogCount + 1); } }; const handleTextChange = (event)=>{ setText(event.target.value); }; const handleAddCustomPreference = ()=>{ setCustomPreference([ ...customPreference, text ]); setText(""); }; const backgroundBasedOnPreference = ()=>{ if (preference === "cats") { return 'bg-[url("/images/cat.jpg")]'; } else if (preference === "dogs") { return 'bg-[url("/images/dog.jpg")]'; } return ""; }; return /*#__PURE__*/ React.createElement("div", { className: `font-roboto px-4 md:px-16 py-6 ${backgroundBasedOnPreference()}`, __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "アンケートページ"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "動物についてどう思いますか？"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-4 mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "like", onClick: ()=>handleButtonClick("like"), className: `bg-gradient-to-r from-green-400 to-teal-500 text-white px-4 py-2 rounded shadow-lg transform transition duration-300 ease-in-out hover:scale-105 ${selected === "like" ? "ring-4 ring-teal-200" : ""}`, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "好き"), /*#__PURE__*/ React.createElement("button", { name: "neutral", onClick: ()=>handleButtonClick("neutral"), className: `bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-4 py-2 rounded shadow-lg transform transition duration-300 ease-in-out hover:scale-105 ${selected === "neutral" ? "ring-4 ring-yellow-200" : ""}`, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "どちらでもない"), /*#__PURE__*/ React.createElement("button", { name: "dislike", onClick: ()=>handleButtonClick("dislike"), className: `bg-gradient-to-r from-red-500 to-pink-500 text-white px-4 py-2 rounded shadow-lg transform transition duration-300 ease-in-out hover:scale-105 ${selected === "dislike" ? "ring-4 ring-pink-200" : ""}`, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "きらい")), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "あなたは猫派ですか、犬派ですか、それとも他の動物が好きですか？"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-4 mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "cats", onClick: ()=>handlePreferenceChange("cats"), className: `bg-blue-500 text-white px-4 py-2 rounded shadow-lg transform transition duration-300 ease-in-out hover:scale-105 ${preference === "cats" ? "ring-4 ring-blue-200" : ""}`, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "猫派"), /*#__PURE__*/ React.createElement("button", { name: "dogs", onClick: ()=>handlePreferenceChange("dogs"), className: `bg-purple-500 text-white px-4 py-2 rounded shadow-lg transform transition duration-300 ease-in-out hover:scale-105 ${preference === "dogs" ? "ring-4 ring-purple-200" : ""}`, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "犬派"), /*#__PURE__*/ React.createElement("button", { name: "others", onClick: ()=>handlePreferenceChange("others"), className: `bg-gray-500 text-white px-4 py-2 rounded shadow-lg transform transition duration-300 ease-in-out hover:scale-105 ${preference === "others" ? "ring-4 ring-gray-200" : ""}`, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "その他"), customPreference.map((item, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-teal-500 text-white px-4 py-2 rounded shadow-md", onClick: ()=>handlePreferenceChange("custom"), __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, item))), preference === "others" && /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "otherPreference", value: text, onChange: handleTextChange, placeholder: "好きな動物を入力してください", className: "px-4 py-2 border rounded w-full md:w-auto flex-1", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddCustomPreference, className: "bg-green-500 text-white px-4 py-2 rounded shadow-md", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "確定")), /*#__PURE__*/ React.createElement("div", { className: "text-[#121212] mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "猫派が押された回数: ", catCount), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "犬派が押された回数: ", dogCount))); }