57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import Logo from "img/logos-solana/dark-explorer-logo.svg";
|
|
import { clusterPath } from "utils/url";
|
|
import { Link, NavLink } from "react-router-dom";
|
|
import { ClusterStatusButton } from "components/ClusterStatusButton";
|
|
|
|
export function Navbar() {
|
|
// TODO: use `collapsing` to animate collapsible navbar
|
|
const [collapse, setCollapse] = React.useState(false);
|
|
|
|
return (
|
|
<nav className="navbar navbar-expand-md navbar-light">
|
|
<div className="container">
|
|
<Link to={clusterPath("/")}>
|
|
<img src={Logo} width="250" alt="Solana Explorer" />
|
|
</Link>
|
|
|
|
<button
|
|
className="navbar-toggler"
|
|
type="button"
|
|
onClick={() => setCollapse((value) => !value)}
|
|
>
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div
|
|
className={`collapse navbar-collapse ml-auto mr-4 ${
|
|
collapse ? "show" : ""
|
|
}`}
|
|
>
|
|
<ul className="navbar-nav mr-auto">
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to={clusterPath("/")} exact>
|
|
Cluster Stats
|
|
</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to={clusterPath("/supply")}>
|
|
Supply
|
|
</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to={clusterPath("/tx/inspector")}>
|
|
Inspector
|
|
</NavLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="d-none d-md-block">
|
|
<ClusterStatusButton />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|