function MainComponent() { const [username, setUsername] = React.useState(""); const [error, setError] = React.useState(""); const [practiceStarted, setPracticeStarted] = React.useState(false); const [countdown, setCountdown] = React.useState(0); const handleStartPractice = ()=>{ if (!username) { setError("名前を入力してください"); } else { setError(""); setPracticeStarted(true); } }; const handleStartCountdown = ()=>{ setCountdown(3); }; React.useEffect(()=>{ if (countdown > 0) { const timer = setTimeout(()=>setCountdown(countdown - 1), 1000); return ()=>clearTimeout(timer); } }, [ countdown ]); if (practiceStarted) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white rounded shadow-md w-[400px] text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, username), /*#__PURE__*/ React.createElement("button", { onClick: handleStartCountdown, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "スタート"), countdown > 0 && /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-4", __source: { fileName: "", lineNumber: 38, columnNumber: 29 }, __self: this }, countdown))); } return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-8 bg-white rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "タイピング練習"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", className: "w-full p-2 border border-gray-300 rounded mb-4", placeholder: "名前を入力してください", value: username, onChange: (e)=>setUsername(e.target.value), __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleStartPractice, className: "w-full bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "練習を始める"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, error))); }