function MainComponent() { const recipeList = [ { id: 1, title: "Simple Bread", imageUrl: "/images/simple-bread.jpg", summary: "A simple and delicious bread recipe." } ]; const RecipeCard = ({ title, imageUrl, summary })=>{ return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded overflow-hidden shadow-lg m-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[200px] object-cover", src: imageUrl, alt: "Simple Bread recipe image", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, summary))); }; const RecipeForm = ()=>{ const [recipe, setRecipe] = React.useState({ title: '', ingredients: '', imageUrl: '', url: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setRecipe((prevRecipe)=>({ ...prevRecipe, [name]: value })); }; const handleSubmit = ()=>{ console.log('Recipe Registered:', recipe); }; return /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "title", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Title"), /*#__PURE__*/ React.createElement("input", { name: "title", className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "Title", value: recipe.title, onChange: handleChange, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "ingredients", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Ingredients (CSV)"), /*#__PURE__*/ React.createElement("input", { name: "ingredients", className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "Ingredients as CSV", value: recipe.ingredients, onChange: handleChange, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "imageUrl", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Image URL"), /*#__PURE__*/ React.createElement("input", { name: "imageUrl", className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "Image URL", value: recipe.imageUrl, onChange: handleChange, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "url", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Reference URL"), /*#__PURE__*/ React.createElement("input", { name: "url", className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "Reference URL", value: recipe.url, onChange: handleChange, __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleSubmit, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Register Recipe"))); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, "パンレシピ管理サイト"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "New Recipe"), /*#__PURE__*/ React.createElement(RecipeForm, { __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mt-8 mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, "Recipe List"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, recipeList.map((recipe)=>/*#__PURE__*/ React.createElement(RecipeCard, { key: recipe.id, title: recipe.title, imageUrl: recipe.imageUrl, summary: recipe.summary, __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this })))); }