You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.1 KiB
42 lines
1.1 KiB
import React from "https://esm.sh/react@17.0.2";
|
|
import styled from "https://esm.sh/styled-components";
|
|
|
|
import Anchor from "https://deno.land/x/aleph/framework/react/components/Anchor.ts";
|
|
import { useRouter } from "https://deno.land/x/aleph/framework/react/hooks.ts";
|
|
|
|
const MenuContainer = styled.div`
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
margin-bottom: 40px;
|
|
`;
|
|
|
|
const MenuItem = styled.p<{ active: boolean }>`
|
|
margin: 0 10px;
|
|
display: block;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
color: #ffd9aa;
|
|
text-shadow: #000 3px 3px 0px;
|
|
text-decoration: none;
|
|
|
|
border-bottom: ${(props) => (props.active ? "1px solid #555" : "0 solid #fff")};
|
|
`;
|
|
|
|
const SiteMenuComponent = () => {
|
|
const router = useRouter();
|
|
const routePath = router.routePath;
|
|
|
|
return (
|
|
<MenuContainer>
|
|
<Anchor style={{ textDecoration: "none" }} href="/">
|
|
<MenuItem active={routePath === "/"}>Overview</MenuItem>
|
|
</Anchor>
|
|
<Anchor style={{ textDecoration: "none" }} href="/miners">
|
|
<MenuItem active={routePath === "/miners"}>Miners</MenuItem>
|
|
</Anchor>
|
|
</MenuContainer>
|
|
);
|
|
};
|
|
|
|
export default SiteMenuComponent;
|
|
|