function MainComponent() { const [recipes, setRecipes] = React.useState([]); const addRecipe = (recipe)=>{ setRecipes([ ...recipes, recipe ]); }; const findSimilarRecipes = (currentRecipe)=>{ return recipes.filter((recipe)=>recipe.ingredients.some((ingredient)=>currentRecipe.ingredients.includes(ingredient)) && recipe !== currentRecipe); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#333] text-white p-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "レシピ辞典"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#about", className: "hover:underline", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#recipes", className: "hover:underline", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "Recipes")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "hover:underline", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, "Contact"))))), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "about", className: "my-8", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "情報を蓄積して調べればすぐ検索可能なレシピ辞典アプリ。")), /*#__PURE__*/ React.createElement("section", { id: "recipes", className: "my-8", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "投稿されたレシピ"), /*#__PURE__*/ React.createElement(RecipeForm, { addRecipe: addRecipe, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, recipes.map((recipe, index)=>/*#__PURE__*/ React.createElement(RecipeCard, { key: index, recipe: recipe, findSimilarRecipes: findSimilarRecipes, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "my-8", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", rows: "4", className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#333] text-white rounded-md", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Send")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333] text-white p-6 text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "© 2023 レシピ辞典. All rights reserved."))); } function RecipeForm({ addRecipe }) { const [title, setTitle] = React.useState(""); const [ingredients, setIngredients] = React.useState(""); const [instructions, setInstructions] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); const newRecipe = { title, ingredients: ingredients.split(", ").map((item)=>item.trim()), instructions }; addRecipe(newRecipe); setTitle(""); setIngredients(""); setInstructions(""); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", value: title, onChange: (e)=>setTitle(e.target.value), className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ingredients", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "材料 (カンマ区切り)"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "ingredients", name: "ingredients", value: ingredients, onChange: (e)=>setIngredients(e.target.value), className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "instructions", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "作り方"), /*#__PURE__*/ React.createElement("textarea", { id: "instructions", name: "instructions", rows: "4", value: instructions, onChange: (e)=>setInstructions(e.target.value), className: "mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#333] text-white rounded-md", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, "投稿")); } function RecipeCard({ recipe, findSimilarRecipes }) { const similarRecipes = findSimilarRecipes(recipe); return /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-md shadow-sm", __source: { fileName: "", lineNumber: 112, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, recipe.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 114, columnNumber: 35 }, __self: this }, "材料:"), " ", recipe.ingredients.join(", ")), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 115, columnNumber: 35 }, __self: this }, "作り方:"), " ", recipe.instructions), similarRecipes.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "類似レシピ:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, similarRecipes.map((similarRecipe, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, similarRecipe.title))))); }