function MainComponent() { const ingredients = [ "バンズ", "肉", "レタス", "チーズ" ]; const sampleBurger = [ "バンズ", "肉", "レタス", "チーズ" ]; const [burger, setBurger] = React.useState([]); const [message, setMessage] = React.useState(""); const ingredientColors = { バンズ: "bg-[#D9A673]", 肉: "bg-[#8B4513]", レタス: "bg-[#7CFC00]", チーズ: "bg-[#FFD700]" }; const handleClick = (ingredient)=>{ if (burger.length < sampleBurger.length) { const newBurger = [ ...burger, ingredient ]; setBurger(newBurger); if (newBurger.length === sampleBurger.length) { if (newBurger.join("") === sampleBurger.join("")) { setMessage("クリア！"); } else { setMessage("もう一度やり直してください。"); } } } }; const renderIngredient = (ingredient, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-full h-[40px] ${ingredientColors[ingredient]} my-1 rounded shadow-lg`, __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }); const renderBurger = burger.map((ingredient, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-fall", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full h-[40px] ${ingredientColors[ingredient]} my-1 rounded shadow-lg`, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-center items-start h-screen bg-[#F3F4F6] py-10 px-4 space-y-10 md:space-y-0 md:space-x-10", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "見本ハンバーガー"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFF8E1] p-4 rounded shadow-lg w-[200px]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, sampleBurger.map((ingredient, index)=>renderIngredient(ingredient, index)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "作成中のハンバーガー"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFF8E1] p-4 rounded shadow-lg w-[200px] h-[300px] flex flex-col-reverse overflow-hidden", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, renderBurger), /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto text-xl text-red-600", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, message)), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-1/2 transform -translate-x-1/2 p-4 flex space-x-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, ingredients.map((ingredient)=>/*#__PURE__*/ React.createElement("button", { key: ingredient, name: ingredient, className: "bg-[#FFEB3B] text-[#F57F17] font-bold py-2 px-4 rounded shadow hover:bg-[#FBC02D]", onClick: ()=>handleClick(ingredient), __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, ingredient))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, ` .animate-fall { animation: fall 0.5s ease-out forwards; } @keyframes fall { from { transform: translateY(-50px); } to { transform: translateY(0); } } `)); }