rearch links, routes + add resume link

src/router/Link.tsx

@@ -1,21 +1,29 @@
 import "./link.scss";
 
-import React, {PropsWithChildren} from "react";
+import React, {HTMLProps, ReactNode} from "react";
 import {useRouter} from "./RouterContext";
 import {Path} from "./router";
 
-export function Link(props: {className?: string, href: Path, replace?: boolean } & PropsWithChildren) {
-  const {children, className, href} = props;
+export function Link(props: {href: Path, children : ReactNode, target?: '_blank' } & HTMLProps<HTMLAnchorElement>) {
+  let {children, className, href} = props;
   const router = useRouter();
+  className = `${className} link`;
 
    function onClick(event: React.MouseEvent) {
-        event.preventDefault();
-        if(window.location.pathname === href) {
-          router.replacePage(props.href);
-        } else {
-          router.pushPage(props.href);
-        }
+     // perform the default action if _blank
+     if(props.target === "_blank") {
+       return;
+     }
+
+     event.preventDefault();
+     if(window.location.pathname === href) {
+       router.replacePage(props.href);
+     } else {
+       router.pushPage(props.href);
+     }
    }
 
-  return <a onClick={onClick} href={href} className={`${className} link`}>{children}</a>
+  return <a {...props} onClick={onClick} className={className}>
+    {children}
+   </a>
 }

src/router/Route.tsx

@@ -1,10 +1,31 @@
-import {PropsWithChildren} from "react";
+import React, {PropsWithChildren} from "react";
 import {useRouter} from "./RouterContext";
 import {Path} from "./router";
 
-export function Route(props: PropsWithChildren & {path: Path}) {
+const Canvas = React.lazy(() => import("../index/Canvas"));
+const About = React.lazy(() => import("../about/AboutPage"));
+
+export const ROUTES: [Path, string][] = [
+  ["/", "Home"],
+  ["/about", "About"],
+  ["/articles", "Articles"]
+];
+
+function Route(props: PropsWithChildren & {path: Path}) {
   const {path, children} = props;
   const router = useRouter();
 
-  return router.current.toLowerCase() === path ? <>{children}</> : <></>
+  return <>{router.current === path && children}</>
+}
+
+
+export function Routes() {
+  return <>
+    <Route path={ROUTES[0]![0]}>
+      <Canvas/>
+    </Route>
+    <Route path={ROUTES[1]![0]}>
+      <About/>
+    </Route>
+  </>
 }