/
navigation.js
37 lines (32 loc) 路 1.09 KB
/
navigation.js
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
import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import Logo from '/public/near-logo.svg'
import { useStore } from '@/layout';
export const Navigation = () => {
const { signedAccountId, wallet } = useStore();
const [action, setAction] = useState(() => { });
const [label, setLabel] = useState('Loading...');
useEffect(() => {
if (!wallet) return;
if (signedAccountId) {
setAction(() => wallet.signOut);
setLabel(`Logout ${signedAccountId}`);
} else {
setAction(() => wallet.signIn);
setLabel('Login');
}
}, [signedAccountId, wallet, setAction, setLabel]);
return (
<nav className="navbar navbar-expand-lg">
<div className="container-fluid">
<Link href="/" passHref legacyBehavior>
<Image priority src={Logo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
</Link>
<div className='navbar-nav pt-1'>
<button className="btn btn-secondary" onClick={action} > {label} </button>
</div>
</div>
</nav>
);
};