function MainComponent() { const customerInfo = { name: "山田太郎", drinks: [ { name: "コーヒー", price: 300 }, { name: "紅茶", price: 250 } ], status: "未会計" }; const [inputName, setInputName] = React.useState(""); const [error, setError] = React.useState(""); const [isRegistered, setIsRegistered] = React.useState(false); const [status, setStatus] = React.useState(customerInfo.status); const totalAmount = customerInfo.drinks.reduce((sum, drink)=>sum + drink.price, 0); const handleSubmit = (e)=>{ e.preventDefault(); setError(""); if (inputName === customerInfo.name) { setIsRegistered(true); } else { setError("名前が見つかりません"); } }; const handlePaymentClick = ()=>{ setStatus("会計済み"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, !isRegistered ? /*#__PURE__*/ React.createElement("form", { className: "mb-4 w-full max-w-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-gray-700 font-bold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { name: "name", id: "name", type: "text", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", value: inputName, onChange: (e)=>setInputName(e.target.value), __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "確認"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }, error)) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, customerInfo.name, " 様のお会計情報"), /*#__PURE__*/ React.createElement("ul", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, customerInfo.drinks.map((drink, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between py-2 border-b", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, drink.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "¥", drink.price)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "合計金額: ¥", totalAmount)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "会計ステータス: ", status)), status === "未会計" && /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", onClick: handlePaymentClick, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "会計済み"))); }