From 93e0d09c831a0436258b9bde33cbc07c5bae0942 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Mon, 10 Apr 2023 20:03:35 -0500
Subject: [PATCH] add quick links

---
 public/open-external-link-icon.svg |  7 +++++
 src/components/Footer.tsx          | 44 ++++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 public/open-external-link-icon.svg

diff --git a/public/open-external-link-icon.svg b/public/open-external-link-icon.svg
new file mode 100644
index 0000000..8cffa9d
--- /dev/null
+++ b/public/open-external-link-icon.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M10 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V14M11 13L20 4M20 4V9M20 4H15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2d8f97e..73c4d8e 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,11 +1,32 @@
 import { type NextPage } from "next/types";
 import Image from 'next/image';
+import Link from "next/link";
 
 interface QuickLink {
     label: string,
     href: string,
 }
 
+const links: QuickLink[] = [
+    {
+        label: "University of Iowa",
+        href: "https://uiowa.edu/",
+    },
+    {
+        label: "Wendell Johnson",
+        href: "https://www.facilities.uiowa.edu/named-building/wendell-johnson-speech-and-hearing-center",
+    }
+]
+
+const QuickLink = ({label, href}: QuickLink) => {
+    return (
+        <a className="hover:underline space-x-2" target="_blank" href={href}>
+            <Image className="inline" alt="external link" width={16} height={16} src="/open-external-link-icon.svg" />
+            <span className="inline">{label}</span>
+        </a>
+    )
+};
+
 interface ContactInfo {
     name: string,
     title: string,
@@ -55,9 +76,7 @@ const FooterLabeledSection = ({title, children}: {
     return (
         <div className="flex flex-col px-8">
             <h1 className="font-bold text-xl text-neutral-400">{title}</h1>
-            <div className="flex flex-col divide-y divide-neutral-500">
-                {children}
-            </div>
+            {children}
         </div>
     )
 }
@@ -83,13 +102,22 @@ const Footer: NextPage = () => {
                 {/** Header and tabs */}
                 <div className="flex flex-row text-neutral-200 px-4 divide-x divide-neutral-500">
                     <FooterLabeledSection title="Quick Links">
+                        <div className="flex flex-col pt-4 space-y-2">
+                            {links.map((quickLink, index) => {
+                                return (
+                                    <QuickLink key={index} {...quickLink}/>
+                                )
+                            })}
+                        </div>
                     </FooterLabeledSection>
                     <FooterLabeledSection title="Contact">
-                        {contacts.map((contactInfo, index) => {
-                            return (
-                                <ContactInfo key={index} {...contactInfo} />
-                            )
-                        })}
+                        <div className="flex flex-col divide-y divide-neutral-500">
+                            {contacts.map((contactInfo, index) => {
+                                return (
+                                    <ContactInfo key={index} {...contactInfo} />
+                                )
+                            })}
+                        </div>
                     </FooterLabeledSection>
                 </div>
             </div>