管理者画面の枠を作成

Author: KaichiManabe

web/app/admin/layout.tsx

@@ -0,0 +1,17 @@
+import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+
+export default function SettingsPageLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <Header title="管理者画面/Admin" />
+      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
+        {children}
+      </div>
+    </NavigateByAuthState>
+  );
+}

web/app/admin/login/page.tsx

@@ -0,0 +1,12 @@
+import AdminLoginForm from "~/components/admin/adminLoginForm";
+
+export default function LoginPage() {
+  return (
+    <main className="flex items-center justify-center md:h-screen">
+      <div className="md:-mt-32 relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4">
+        <h2>管理者ログインページ</h2>
+        <AdminLoginForm />
+      </div>
+    </main>
+  );
+}

web/app/admin/page.tsx

@@ -0,0 +1,3 @@
+export default function Admin() {
+  return <div>管理者画面</div>;
+}

web/components/admin/adminLoginForm.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function adminLoginForm() {
+  return <div></div>;
+}