feat: initialize AutoTeacher Next.js project structure

src/components/AppHeader.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import Link from "next/link";
+import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+
+const headerStyle: CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "1rem 1.5rem",
+  borderBottom: "1px solid #e5e7eb",
+  backgroundColor: "#ffffff",
+  position: "sticky",
+  top: 0,
+  zIndex: 10,
+};
+
+const brandStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem",
+  fontWeight: 600,
+  fontSize: "1.125rem",
+};
+
+const actionGroupStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem",
+};
+
+const signInButtonStyle: CSSProperties = {
+  padding: "0.5rem 1.1rem",
+  borderRadius: "999px",
+  border: "1px solid #2563eb",
+  backgroundColor: "transparent",
+  color: "#2563eb",
+  cursor: "pointer",
+  fontSize: "0.95rem",
+};
+
+export function AppHeader() {
+  return (
+    <header style={headerStyle}>
+      <Link href="/" style={brandStyle}>
+        <span role="img" aria-label="logo">
+          📚
+        </span>
+        AutoTeacher
+      </Link>
+      <div style={actionGroupStyle}>
+        <SignedOut>
+          <SignInButton mode="modal">
+            <button type="button" style={signInButtonStyle}>
+              教师登录
+            </button>
+          </SignInButton>
+        </SignedOut>
+        <SignedIn>
+          <Link href="/teacher" style={{ color: "#2563eb", fontWeight: 500 }}>
+            教师后台
+          </Link>
+          <UserButton afterSignOutUrl="/" />
+        </SignedIn>
+      </div>
+    </header>
+  );
+}
+
+export default AppHeader;