blob: ea49ea8d3e63531448d7dbc7a7f5566027e3c04a (
plain)
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
|
import { useState, useEffect } from 'react';
import styles from '../styles/Navbar.module.css';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleUp, faCircleDown } from '@fortawesome/free-solid-svg-icons';
function Navbar() {
const [isOnline, setIsOnline] = useState<boolean | null>(null);
useEffect(() => {
const checkAPIStatus = async () => {
try {
const res = await fetch('/api/ping');
if (res.status === 200) {
setIsOnline(true);
} else {
setIsOnline(false);
}
} catch (error) {
setIsOnline(false);
}
};
checkAPIStatus();
}, []);
return (
<div className={styles.navbar}>
<div className={styles.left}>
<Link to={'/login'}>
<a className={styles.link}>Login</a>
</Link>
<Link to={'/signup'}>
<a className={styles.link}>Signup</a>
</Link>
</div>
<div className={styles.right}>
<a
className={styles.link}
title={
isOnline === null
? 'Loading...'
: isOnline
? 'API is online'
: 'API is offline'
}
>
API Status:{' '}
{isOnline === null ? (
'Loading...'
) : isOnline ? (
<FontAwesomeIcon icon={faCircleUp} className={styles.circleUp} />
) : (
<FontAwesomeIcon
icon={faCircleDown}
className={styles.circleDown}
/>
)}
</a>
</div>
</div>
);
}
export default Navbar;
|
