mysticsymbolic.github.io/lib/page.tsx

82 wiersze
1.8 KiB
TypeScript

import React, { MouseEvent, useContext } from "react";
import type { PageName } from "./pages";
export type PageContext = {
currPage: PageName;
allPages: PageName[];
pushState: (href: string) => void;
};
export const PageContext = React.createContext<PageContext>({
currPage: "vocabulary",
allPages: [],
pushState: () => {
throw new Error("No page context is defined!");
},
});
export const PAGE_QUERY_ARG = "p";
function isNormalLinkClick(e: MouseEvent): boolean {
return !e.shiftKey && !e.altKey && !e.metaKey && !e.ctrlKey && e.button === 0;
}
const PageLink: React.FC<{ page: PageName }> = ({ page }) => {
const href = `?${PAGE_QUERY_ARG}=${encodeURIComponent(page)}`;
const { pushState } = useContext(PageContext);
const handleClick = (e: MouseEvent) => {
if (isNormalLinkClick(e)) {
pushState(href);
e.preventDefault();
}
};
return (
<a href={href} onClick={handleClick}>
{page}
</a>
);
};
const Navbar: React.FC<{}> = (props) => {
const pc = useContext(PageContext);
return (
<nav>
<ul className="navbar">
{pc.allPages.map((pageName) => (
<li key={pageName}>
{pc.currPage === pageName ? pageName : <PageLink page={pageName} />}
</li>
))}
</ul>
</nav>
);
};
export type PageProps = {
title: string;
children?: any;
};
export const Page: React.FC<PageProps> = ({ title, children }) => {
return (
<div className="page">
<header>
<h1>Mystic Symbolic {title}</h1>
<Navbar />
</header>
{children}
<footer>
<p>
For more details about this project, see its{" "}
<a href="https://github.com/toolness/mystic-symbolic" target="_blank">
GitHub repository
</a>
.
</p>
</footer>
</div>
);
};