Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 7x 7x 7x 7x 7x 7x | import { Link } from "react-router-dom";
import { useCurrentUser, useLogout } from "../../utils/currentUser";
import { useSystemInfo } from "../../utils/systemInfo";
export default function AppNavbar() {
const currentUser = useCurrentUser();
const logout = useLogout();
const { data: systemInfo } = useSystemInfo();
const handleLogin = () => {
window.location.href =
systemInfo?.oauthLogin ?? "/oauth2/authorization/google";
};
const handleLogout = () => {
logout.mutate();
};
return (
<header
style={{
background: "#ffffff",
borderBottom: "1px solid var(--border)",
}}
>
<div
style={{
width: "1126px",
maxWidth: "100%",
margin: "0 auto",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: "16px",
padding: "16px 20px",
}}
>
<Link
to="/"
style={{
color: "#1E293B",
fontSize: "1.5rem",
fontWeight: 700,
textDecoration: "none",
}}
>
Scaffold
</Link>
<span
style={{
color: "#475569",
fontSize: "0.95rem",
}}
>
UCSB CS concept graph
</span>
<div
style={{
marginLeft: "auto",
display: "flex",
alignItems: "center",
gap: "12px",
}}
>
{currentUser?.loggedIn ? (
<>
<span style={{ color: "#475569", fontSize: "0.9rem" }}>
{
(currentUser.root as { user?: { email?: string } })?.user
?.email
}
</span>
<button
onClick={handleLogout}
style={{
padding: "6px 14px",
background: "#1E293B",
color: "#ffffff",
border: "none",
borderRadius: "6px",
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: 600,
}}
>
Log Out
</button>
</>
) : (
<button
onClick={handleLogin}
style={{
padding: "6px 14px",
background: "#1E293B",
color: "#ffffff",
border: "none",
borderRadius: "6px",
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: 600,
}}
>
Log In
</button>
)}
</div>
</div>
</header>
);
}
|