-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathheader.js
More file actions
55 lines (51 loc) · 1.89 KB
/
Copy pathheader.js
File metadata and controls
55 lines (51 loc) · 1.89 KB
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
const headerHTML = `<h1 class="text-2xl md:text-4xl">
Hi <span id="userName"></span> 👋
</h1>
<p class="flex justify-between gap-4 font-bold mr-5 text-2xl">
<a
id="github-anchor"
class="px-3"
target="_blank"
href="https://github.com/corbado/javascript/tree/main/packages/react"
>
<i class="fa-brands fa-github" id="github-icon"></i> Github
</a>
<a
id="documentation-anchor"
class="px-3"
target="_blank"
href="https://docs.corbado.com/frontend-integration/react?pk_vid=39aa19b26331c63f17061661133d1eca"
>
<i class="fa-brands fa-github" id="documentation-icon"></i> Documentation
</a>
</p>`;
export function insertHeader(isAuthenticated, user) {
const header = document.getElementById('header');
header.innerHTML = headerHTML;
const userName = document.getElementById('userName');
const githubAnchor = document.getElementById('github-anchor');
const githubIcon = document.getElementById('github-icon');
const documentationIcon = document.getElementById('documentation-icon');
const documentationAnchor = document.getElementById('documentation-anchor');
if (isAuthenticated) {
userName.textContent = user ? user.name || user.orig : '';
} else {
userName.textContent = 'Welcome to ';
const codeElement = document.createElement('code');
codeElement.className = 'language-ts';
codeElement.textContent = '@corbado/web-js';
userName.appendChild(codeElement);
}
githubAnchor.onpointerenter = () => {
githubIcon.classList.add('fa-bounce');
};
githubAnchor.onpointerout = () => {
githubIcon.classList.remove('fa-bounce');
};
documentationAnchor.onpointerenter = () => {
documentationIcon.classList.add('fa-bounce');
};
documentationAnchor.onpointerout = () => {
documentationIcon.classList.remove('fa-bounce');
};
}