wrap user input component

pages/index.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import Head from "next/head";
 import Timetable from "@/components/Timetable";
+import UserInputWrap from "@/components/UserInputWrap";
 
 export default function Home() {
   const [user, setUser] = React.useState("");
-  const [begin, setBegin] = React.useState(false);
-
-  React.useEffect(() => {
-    setUser(localStorage.getItem("user") || "");
-  }, []);
 
   return (
     <>
@@ -19,29 +15,9 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        {!begin && (
-          <div>
-            <input
-              placeholder="在这输你的名字"
-              value={user}
-              onChange={(event) => setUser(event.target.value)}
-            />
-            <button
-              onClick={() => {
-                if (user.trim() === "") {
-                  alert("姓名不能为空");
-                  return;
-                }
-                setUser(user.trim());
-                setBegin(true);
-                localStorage.setItem("user", user);
-              }}
-            >
-              Login
-            </button>
-          </div>
-        )}
-        {begin && <Timetable user={user} />}
+        <UserInputWrap setUser={setUser}>
+          <Timetable user={user} />
+        </UserInputWrap>
       </main>
     </>
   );