hide download button

components/Timetable.tsx

@@ -40,6 +40,7 @@ const Timetable = ({
   replaceInputType = "checkbox",
   apiRecordEndPoint = "/api/record",
   openRecordMode = false,
+  hideDownloadButton = true,
 }) => {
   const [editable, setEditable] = React.useState(true);
   const ref = React.useRef();
@@ -229,10 +230,7 @@ const Timetable = ({
     main();
   }, []);
 
-  return (
+  const DownloadMarks = async () => {
-    <>
-      <button
-        onClick={async () => {
     console.log("download marks", marks);
     const data = {
       user,
@@ -250,19 +248,26 @@ const Timetable = ({
     }
     console.log(data);
     downloadObjectAsJson(data, user);
-        }}
+  };
-      >
+
-        DownloadSelection
+  return (
-      </button>
+    <>
-      <span>Login as {user}</span>
+      <h2 style={{ textAlign: "center" }}>Login as {user}</h2>
       <div
         ref={ref}
         contentEditable={editable}
         style={{
           overflow: "scroll",
+          display: "flex",
+          justifyContent: "center",
         }}
         onInput={handleInput}
       ></div>{" "}
+      {!hideDownloadButton && (
+        <p style={{ display: "flex", justifyContent: "center" }}>
+          <button onClick={DownloadMarks}>Download Selection</button>
+        </p>
+      )}
       <div style={{ display: "none" }} id="download-dom"></div>
     </>
   );

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,13 +12,32 @@ const UserInputWrap = ({ children, setUser }) => {
   return (
     <>
       {!begin && (
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            alignItems: "center",
+            minHeight: "100vh",
+          }}
+        >
           <div>
             <input
-            placeholder="在这输你的名字"
+              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("姓名不能为空");
@@ -31,6 +51,7 @@ const UserInputWrap = ({ children, setUser }) => {
               Login
             </button>
           </div>
+        </div>
       )}
       {begin && children}
     </>

pages/tool.tsx

@@ -47,6 +47,7 @@ export default function Home() {
             disableConflictCheck={true}
             disableNetwork={true}
             replaceInputType={"number"}
+            hideDownloadButton={false}
           />
         )}
       </main>