center UI

components/UserInputWrap.tsx

@@ -1,3 +1,4 @@
+import { NodeNextRequest } from "next/dist/server/base-http/node";
 import React from "react";
 
 const UserInputWrap = ({ children, setUser }) => {
@@ -11,25 +12,45 @@ const UserInputWrap = ({ children, setUser }) => {
   return (
     <>
       {!begin && (
-        <div>
-          <input
-            placeholder="在这输你的名字"
-            value={inputUser}
-            onChange={(event) => setInputUser(event.target.value)}
-          />
-          <button
-            onClick={() => {
-              if (inputUser.trim() === "") {
-                alert("姓名不能为空");
-                return;
-              }
-              setUser(inputUser.trim());
-              setBegin(true);
-              localStorage.setItem("user", inputUser.trim());
-            }}
-          >
-            Login
-          </button>
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            alignItems: "center",
+            minHeight: "100vh",
+          }}
+        >
+          <div>
+            <input
+              style={{
+                margin: "0.5em",
+                padding: "0.5em",
+                borderRadius: "0.39em",
+              }}
+              placeholder="你的名字..."
+              value={inputUser}
+              onChange={(event) => setInputUser(event.target.value)}
+              size={10}
+            />
+            <button
+              style={{
+                margin: "0.5em",
+                padding: "0.5em",
+                backgroundColor: "#39ceff",
+              }}
+              onClick={() => {
+                if (inputUser.trim() === "") {
+                  alert("姓名不能为空");
+                  return;
+                }
+                setUser(inputUser.trim());
+                setBegin(true);
+                localStorage.setItem("user", inputUser.trim());
+              }}
+            >
+              Login
+            </button>
+          </div>
         </div>
       )}
       {begin && children}