rearch links, routes + add resume link

src/nav/Links.tsx

@@ -1,21 +1,33 @@
-import {useState} from "react";
 import {Link} from "../router/Link";
 import {motion} from "framer-motion";
+import {ROUTES} from "../router/Route";
+import ResumePdf from "../img/resume.pdf";
 
 export function Links() {
-  const [links] = useState(["About", "Articles"]);
 
   return <div className="links">
-    { links.map(() => /* add spacers for flexbox */ <div/> )}
-    <Title/>
-    { links.map(link => <Link href={`/${link}`}><h3>{link}</h3></Link>) }
-  </div>
-}
-
-function Title() {
-  return (
+    <Spacers length={ROUTES.length + 1} />
     <Link href="/" className="name">
       <motion.h1 className="name">Tymur Arsentiev</motion.h1>
     </Link>
-  );
+    {
+      ROUTES.map(([path, name]) =>
+        <Link key={path} href={path}>
+          <h3>{name}</h3>
+        </Link>
+      )
+    }
+    <Link key={ResumePdf} href={ResumePdf} target="_blank">
+      <h3>Resume</h3>
+    </Link>
+  </div>
 }
+
+function Spacers(props: {length: number}) {
+  const spacers = [];
+  for (let i = 0; i < props.length; i++) {
+    spacers.push(<div key={i}/>);
+  }
+
+  return spacers;
+}