add quick links

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"/>
+

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}
-                {children}
-            </div>
         </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) => {
+                        <div className="flex flex-col divide-y divide-neutral-500">
-                            return (
+                            {contacts.map((contactInfo, index) => {
-                                <ContactInfo key={index} {...contactInfo} />
+                                return (
-                            )
+                                    <ContactInfo key={index} {...contactInfo} />
-                        })}
+                                )
+                            })}
+                        </div>
                     </FooterLabeledSection>
                 </div>
             </div>