function MainComponent() { const [selectedVegetables, setSelectedVegetables] = React.useState([]); const [recipes, setRecipes] = React.useState([]); const vegetables = [ { id: 1, name: 'きゅうり', value: 'cucumber' }, { id: 2, name: 'トマト', value: 'tomato' }, { id: 3, name: '大根', value: 'daikon' }, { id: 4, name: 'じゃがいも', value: 'potato' }, { id: 5, name: '白菜', value: 'napa_cabbage' }, { id: 6, name: 'キャベツ', value: 'cabbage' }, { id: 7, name: 'パプリカ', value: 'bell_pepper' }, { id: 8, name: 'ニンジン', value: 'carrot' }, { id: 9, name: '玉ねぎ', value: 'onion' }, { id: 10, name: 'ピーマン', value: 'green_pepper' }, { id: 11, name: 'かぼちゃ', value: 'pumpkin' }, { id: 12, name: 'れんこん', value: 'lotus_root' } ]; function handleSelect(vegValue) { setSelectedVegetables((prev)=>{ const newSelection = prev.includes(vegValue) ? prev.filter((item)=>item !== vegValue) : [ ...prev, vegValue ]; return newSelection; }); } function fetchRecipes() { const fetchedRecipes = selectedVegetables.map((veg)=>({ name: vegetables.find((v)=>v.value === veg).name, description: `${veg}を使ったおすすめレシピ`, imageUrl: `/images/${veg}.jpg`, recipeLink: `/recipes/${veg}` })); setRecipes(fetchedRecipes); } return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f3f4f6] flex justify-center items-center p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white shadow-lg rounded-lg p-8 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "おすすめのレシピと作り方"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, vegetables.map((vegetable, index)=>/*#__PURE__*/ React.createElement("button", { key: index, value: vegetable.value, onClick: ()=>handleSelect(vegetable.value), className: `m-1 py-2 px-4 border rounded ${selectedVegetables.includes(vegetable.value) ? 'bg-[#4caf50] text-white' : 'bg-white text-black'}`, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, vegetable.name))), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 bg-[#4caf50] text-white rounded hover:bg-[#45a045]", onClick: fetchRecipes, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "レシピを見る"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, recipes.map((recipe, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[300px] p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] h-[200px] mb-4 flex justify-center items-center rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: recipe.imageUrl, alt: `${recipe.name}のレシピ画像`, className: "max-h-full max-w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#444]", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, recipe.name)), /*#__PURE__*/ React.createElement("p", { className: "text-[#555] mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, recipe.description), /*#__PURE__*/ React.createElement("a", { href: recipe.recipeLink, className: "w-full py-2 bg-[#4caf50] text-white rounded hover:bg-[#45a045] block text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "詳細を見る")))))); }