edit 周りを修正

Author: nakaterm

web/app/edit/courses/page.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { Box, Typography } from "@mui/material";
 import Link from "next/link";
 import { useAboutMe } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
-import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 import EditableCoursesTable from "~/components/course/EditableCoursesTable";
 
 export default function EditCourses() {
@@ -14,48 +12,27 @@ export default function EditCourses() {
   const error = state.current === "error" ? state.error : null;
 
   return (
-    <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Box
-        sx={{
-          padding: "20px",
-          maxWidth: "350px",
-          height: "100%",
-          margin: "0 auto",
-          display: "flex",
-          flexDirection: "column",
-          textAlign: "center",
-        }}
-      >
-        <Typography variant="h6" component="h1" mb={1}>
-          授業編集
-        </Typography>
-        {loading ? (
-          <FullScreenCircularProgress />
-        ) : error ? (
-          <p>Error: {error.message}</p>
-        ) : data ? (
-          <>
-            <EditableCoursesTable userId={data.id} />
-          </>
-        ) : (
-          <p>データがありません。</p>
-        )}
-
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            marginTop: "20px",
-          }}
-        >
-          <Link href="/settings/profile" className="btn">
-            設定画面に戻る
-          </Link>
-          <Link href="/edit/profile" className="btn btn-primary">
-            プロフィール編集へ
-          </Link>
-        </Box>
-      </Box>
-    </NavigateByAuthState>
+    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-5 text-center">
+      <h1 className="mb-2 text-xl">授業編集</h1>
+      {loading ? (
+        <FullScreenCircularProgress />
+      ) : error ? (
+        <p>Error: {error.message}</p>
+      ) : data ? (
+        <>
+          <EditableCoursesTable userId={data.id} />
+        </>
+      ) : (
+        <p>データがありません。</p>
+      )}
+      <div className="mt-5 flex justify-between">
+        <Link href="/settings/profile" className="btn">
+          設定画面に戻る
+        </Link>
+        <Link href="/edit/profile" className="btn btn-primary">
+          プロフィール編集へ
+        </Link>
+      </div>
+    </div>
   );
 }

web/app/edit/layout.tsx

@@ -1,29 +1,17 @@
-import { Box } from "@mui/material";
 import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function EditPageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="編集/Edit" />
-      <Box
-        sx={{
-          position: "absolute", // TODO: absolute 指定しない
-          top: {
-            xs: "56px",
-            sm: "64px",
-          },
-          bottom: "56px",
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-        }}
-      >
+      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
-      </Box>
-    </>
+      </div>
+    </NavigateByAuthState>
   );
 }