function JapaneseEmployeeButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "従業員"); } function JapaneseEmployeeButtonStory() { const handleClick = ()=>{ console.log("Employee Selected"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseEmployeeButton, { onClick: handleClick, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isAdmin, setIsAdmin] = React.useState(false); const [isEmployee, setIsEmployee] = React.useState(false); const [password, setPassword] = React.useState(""); const [passwordError, setPasswordError] = React.useState(false); const [tasks, setTasks] = React.useState([ "タスク1", "タスク2", "タスク3" ]); const [newTask, setNewTask] = React.useState(""); const handleAddTask = ()=>{ if (newTask) { setTasks([ ...tasks, newTask ]); setNewTask(""); } }; const handlePasswordSubmit = ()=>{ if (password === "0111") { setIsAdmin(true); setPasswordError(false); } else { setPasswordError(true); } }; const goBack = ()=>{ setIsAdmin(false); setIsEmployee(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, !isAdmin && !isEmployee ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-[400px] text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "チェックリスト"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "アカウントの種類を選んでください"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 justify-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseEmployeeButton, { onClick: ()=>setIsEmployee(true), __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsAdmin(false), className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "管理者")), passwordError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "パスワードが間違っています")) : isAdmin ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-[400px] text-center relative", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: goBack, className: "absolute top-2 right-2 bg-gray-300 hover:bg-gray-500 text-black font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "毎日のタスク"), /*#__PURE__*/ React.createElement("ul", { className: "bg-gray-200 p-4 rounded text-left", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { className: "mb-2", key: index, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, task))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTask", value: newTask, onChange: (e)=>setNewTask(e.target.value), className: "p-2 border rounded w-full", placeholder: "新しいタスクを追加", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTask, className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "タスクを追加"))) : /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-[400px] text-center relative", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: goBack, className: "absolute top-2 right-2 bg-gray-300 hover:bg-gray-500 text-black font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "管理者パスワードを入力してください"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "p-2 border rounded w-full", placeholder: "••••", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handlePasswordSubmit, className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "確認する"))); }