function MainComponent() { const quotes = [ "The best way to predict the future is to create it. - Peter Drucker", "Life is what happens when you're busy making other plans. - John Lennon", "The only limit to our realization of tomorrow is our doubts of today. - Franklin D. Roosevelt", "Do not watch the clock. Do what it does. Keep going. - Sam Levenson", "In the end, it's not the years in your life that count. It's the life in your years. - Abraham Lincoln", "Never let the fear of striking out keep you from playing the game. - Babe Ruth" ]; const [currentQuote, setCurrentQuote] = React.useState(quotes[Math.floor(Math.random() * quotes.length)]); const [formData, setFormData] = React.useState({ userId: "", password: "", secret: "" }); const [isAuthenticated, setIsAuthenticated] = React.useState(false); React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentQuote(quotes[Math.floor(Math.random() * quotes.length)]); }, 10000); return ()=>clearInterval(interval); }, [ quotes ]); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = ()=>{ const { userId, password } = formData; if (userId === "test" && password === "password") { setIsAuthenticated(true); } else { setIsAuthenticated(false); alert("認証に失敗しました"); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-[400px]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "認証画面"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "userId", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "ユーザID"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "userId", name: "userId", type: "text", value: formData.userId, onChange: handleChange, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "password", name: "password", type: "password", value: formData.password, onChange: handleChange, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "secret", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "合言葉"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "secret", name: "secret", type: "text", value: formData.secret, onChange: handleChange, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#333333] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleSubmit, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "ログイン")))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6 text-gray-600 italic", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, currentQuote)); }