function MainComponent() { const daysOfWeekOptions = { "Mon-Fri": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" ], "Mon-Sat": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], "Mon-Sun": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ] }; const [daysOfWeek, setDaysOfWeek] = React.useState(daysOfWeekOptions["Mon-Sun"]); const [inCharge, setInCharge] = React.useState({ Monday: "", Tuesday: "", Wednesday: "", Thursday: "", Friday: "", Saturday: "", Sunday: "" }); const [menuRequests, setMenuRequests] = React.useState(""); const [menu, setMenu] = React.useState({}); const [ingredients, setIngredients] = React.useState(""); const [language, setLanguage] = React.useState("japanese"); const labelMap = { japanese: { title: "今週の夕食メニュー", selectDays: "曜日を選択してください: ", request: "メニューのリクエストを入力してください", ingredients: "食材を入力してください", generate: "メニューを生成", inCharge: "誰が担当ですか？", ingredientsList: "購入リストをコピー" }, english: { title: "Dinner Menu for the Week", selectDays: "Select days: ", request: "Enter your requests for the menu", ingredients: "Enter ingredients you want to consume this week", generate: "Generate Menu", inCharge: "Who's in charge of cooking on", ingredientsList: "Copy Shopping List" } }; function handleEdit(day) { const personInCharge = prompt(`${labelMap[language].inCharge} ${day}?`); setInCharge({ ...inCharge, [day]: personInCharge }); } function handleDaysOfWeekChange(event) { setDaysOfWeek(daysOfWeekOptions[event.target.value]); } function handleMenuRequestsChange(event) { setMenuRequests(event.target.value); } function handleIngredientsChange(event) { setIngredients(event.target.value); } function handleLanguageChange(event) { setLanguage(event.target.value); } function generateMenu() { const newMenu = daysOfWeek.reduce((acc, day)=>{ const mainDish = "主食"; const soup = "汁物"; const mainMeal = "主菜"; const sideDish = "副菜"; acc[day] = `${mainDish}, ${soup}, ${mainMeal}, ${sideDish}`; return acc; }, {}); setMenu(newMenu); } const daysAndMeals = daysOfWeek.map((day)=>/*#__PURE__*/ React.createElement("li", { key: day, className: "font-roboto text-xl flex justify-between items-center bg-gray-200 p-4 rounded shadow", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, day, " - ", menu[day]), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, inCharge[day]), /*#__PURE__*/ React.createElement("button", { className: "ml-4 p-2 bg-blue-500 text-white rounded", onClick: ()=>handleEdit(day), __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Edit"))); const ingredientList = ingredients.split(", ").map((ingredient, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-xl bg-gray-100 p-2 rounded shadow", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, ingredient)); return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, labelMap[language].title), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mr-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, labelMap[language].selectDays), /*#__PURE__*/ React.createElement("select", { className: "font-roboto p-2 border rounded", name: "daysOfWeek", onChange: handleDaysOfWeekChange, __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Mon-Fri", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Mon-Fri"), /*#__PURE__*/ React.createElement("option", { value: "Mon-Sat", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Mon-Sat"), /*#__PURE__*/ React.createElement("option", { value: "Mon-Sun", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Mon-Sun"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mr-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Language: "), /*#__PURE__*/ React.createElement("select", { className: "font-roboto p-2 border rounded", name: "language", value: language, onChange: handleLanguageChange, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "japanese", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "日本語"), /*#__PURE__*/ React.createElement("option", { value: "english", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "English"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mr-4 block", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, labelMap[language].request, ": "), /*#__PURE__*/ React.createElement("textarea", { className: "font-roboto p-2 border rounded w-full", name: "menuRequests", onChange: handleMenuRequestsChange, __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mr-4 block", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, labelMap[language].ingredients, ": "), /*#__PURE__*/ React.createElement("textarea", { className: "font-roboto p-2 border rounded w-full", name: "ingredients", onChange: handleIngredientsChange, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "font-roboto p-4 bg-green-500 text-white rounded mb-6", onClick: generateMenu, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, labelMap[language].generate), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, daysAndMeals), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 mt-6", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, ingredientList), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "font-roboto p-2 border rounded w-full", readOnly: true, value: ingredients.split(", ").join("\n"), __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto p-2 bg-blue-500 text-white rounded mt-2", onClick: ()=>navigator.clipboard.writeText(ingredients.split(", ").join("\n")), __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, labelMap[language].ingredientsList))); }