72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
"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;
|