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>