From d7c984adbbca2c1694bb4399b62f14006fd1741a Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 9 Oct 2023 10:00:09 -0500
Subject: [PATCH] update resume paths

---
 app/about/page.tsx                    | 10 +++++-----
 components/About/ResumeDownloader.tsx | 21 +++++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 components/About/ResumeDownloader.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 6dcd0f9..3b8e38e 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -6,6 +6,7 @@ import { RxChevronDown } from "react-icons/rx";
 import { useState } from "react";
 import { FaGithub, FaLinkedin } from "react-icons/fa";
 import Card from "@/components/ui/Card";
+import ResumeDownloader from "@/components/About/ResumeDownloader";
 
 export default function Resume() {
     const [skillsVisible, setSkillsVisible] = useState(true);
@@ -21,11 +22,10 @@ export default function Resume() {
 
                 <div className="hidden bg-slate-950"></div>
 
-                <div className="flex items-center pt-2 dark:text-rose-100">
-                    <p className="mr-2">Download a copy for later?</p>
-                    <a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.pdf</a>
-                    <a download href="/resume/Mikayla Resume 0623.docx" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.docx</a>
-                </div>
+                <ResumeDownloader
+                    label="Download a copy for later?"
+                    paths={["/resume/Mikayla Resume 1023.pdf", "/resume/Mikayla Resume 1023.docx"]}
+                />
 
                 <div className="flex pt-2">
                     <Link passHref className="flex items-center dark:text-white mr-8 hover:text-sky-300 active:text-white" href="https://github.com/innocuous-symmetry"><FaGithub className="mr-2" />innocuous-symmetry</Link>
diff --git a/components/About/ResumeDownloader.tsx b/components/About/ResumeDownloader.tsx
new file mode 100644
index 0000000..670b755
--- /dev/null
+++ b/components/About/ResumeDownloader.tsx
@@ -0,0 +1,21 @@
+export default function ResumeDownloader({ paths, label }: { paths: string[], label?: string }) {
+    return (
+        <div className="flex items-center pt-2 dark:text-rose-100">
+            { label && <p className="mr-2">{label}</p> }
+            { paths.map((path, idx) => (
+                <a
+                    key={idx}
+                    download
+                    href={path}
+                    target="_blank"
+                    referrerPolicy="no-referrer"
+                    rel="noopener"
+                >
+                    { `.${path.split('.').pop()}` }
+                </a>
+            ))}
+            <a download href="/resume/Mikayla Resume 1023.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.pdf</a>
+            <a download href="/resume/Mikayla Resume 1023.docx" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.docx</a>
+        </div>
+    )
+}