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({ 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 ( {page} ); }; const Navbar: React.FC<{}> = (props) => { const pc = useContext(PageContext); return ( ); }; export type PageProps = { title: string; children?: any; }; export const Page: React.FC = ({ title, children }) => { return (

Mystic Symbolic {title}

{children}
); };