Created admin login UI component

js/src/app/user/admin/Admin.page.tsx

@@ -1,3 +1,4 @@
+import AdminLogin from "@/app/user/admin/_components/AdminLogin";
 export default function AdminPage() {
-  return <></>;
+  return (<AdminLogin />);
 }

js/src/app/user/admin/_components/AdminLogin.tsx

@@ -0,0 +1,154 @@
+import { Button, PasswordInput, TextInput } from "@mantine/core";
+import { useState, type FormEvent } from "react";
+
+export default function AdminLogin() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const [errors, setErrors] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const newErrors = {
+      email: "",
+      password: "",
+    };
+
+    if (!email.trim()) {
+      newErrors.email = "Email is required";
+    }
+
+    if (!password.trim()) {
+      newErrors.password = "Password is required";
+    }
+
+    setErrors(newErrors);
+
+    if (newErrors.email || newErrors.password) {
+      return;
+    }
+
+    // Login handler is not in scope for this ticket.
+    console.log("Admin login submitted", { email, password });
+  };
+
+  return (
+  <div
+    style={{
+      minHeight: "100vh",
+      width: "100vw",
+      backgroundColor: "white",
+      color: "black",
+      position: "relative",
+    }}
+  >
+    <header
+      style={{
+        position: "absolute",
+        top: "24px",
+        left: "24px",
+        display: "flex",
+        alignItems: "center",
+        gap: "16px",
+      }}
+    >
+      <div
+        style={{
+          width: "56px",
+          height: "56px",
+          backgroundColor: "white",
+          color: "black",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "12px",
+        }}
+      >
+        logo
+      </div>
+      <h1 style={{ fontSize: "36px", fontWeight: 700, color: "black" }}>PatChats</h1>
+    </header>
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        paddingTop: "220px",
+      }}
+    >
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          width: "250px",
+        }}
+      >
+        <h2
+          style={{
+            textAlign: "center",
+            fontSize: "32px",
+            fontWeight: 400,
+            marginBottom: "20px",
+            color: "black",
+          }}
+        >
+          Admin Log in
+        </h2>
+        <TextInput
+          placeholder="Admin email"
+          value={email}
+          onChange={(event) => setEmail(event.currentTarget.value)}
+          error={errors.email}
+          radius="md"
+          size="sm"
+          mb="md"
+          styles={{
+            input: {
+              backgroundColor: "#d1d1d1",
+              color: "black",
+              border: "none",
+            },
+          }}
+        />
+        <PasswordInput
+          placeholder="Password"
+          value={password}
+          onChange={(event) => setPassword(event.currentTarget.value)}
+          error={errors.password}
+          radius="md"
+          size="sm"
+          mb="lg"
+          styles={{
+            input: {
+              backgroundColor: "#d1d1d1",
+              color: "black",
+              border: "none",
+            },
+            innerInput: {
+              color: "black",
+            },
+          }}
+        />
+        <Button
+          type="submit"
+          fullWidth
+          radius="md"
+          size="sm"
+          styles={{
+            root: {
+              backgroundColor: "#a94700",
+              height: "42px",
+            },
+          }}
+        >
+          Admin Log in
+        </Button>
+      </form>
+    </div>
+  </div>
+);
+}