From c3b645321f11f73b79592edcf3c4387ada1f5316 Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Mon, 20 Feb 2023 20:45:10 +0000
Subject: [PATCH] Extracted nav link component and updated footer styling

---
 components/Footer.tsx        | 17 ++++-------------
 components/ui/Navigation.tsx | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 5619d7e..4eb2a6e 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,20 +1,10 @@
-import Link from 'next/link'
-import React, {ReactNode} from 'react'
+import React from 'react'
 import {OuterContainer, InnerContainer} from './Container'
+import {NavLink} from '@/components/ui/Navigation'
 import {SpotifyPlayer} from './ui/SpotifyPlayer'
 import {SocialLink} from '@/components/ui/SocialLink'
 import {GitHubIcon, LinkedInIcon, TwitterIcon} from '@/components/icons/SocialIcons'
 
-function NavLink({href, children}: { href: string, children: ReactNode }) {
-    return (
-        <Link
-            href={href}
-            className="transition hover:text-indigo-500 dark:hover:text-indigo-400"
-        >
-            {children}
-        </Link>
-    )
-}
 
 export function Footer() {
     return (
@@ -24,7 +14,8 @@ export function Footer() {
                     <InnerContainer>
                         <SpotifyPlayer/>
                         <div className="flex flex-col items-center justify-between gap-6 mt-12">
-                            <div className="flex gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
+                            <div
+                                className="flex flex-wrap justify-center gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
                                 <NavLink href="/about">About</NavLink>
                                 <NavLink href="/dashboard">Dashboard</NavLink>
                                 <NavLink href="/writing">Writing</NavLink>
diff --git a/components/ui/Navigation.tsx b/components/ui/Navigation.tsx
index cc2ee5e..a66e44e 100644
--- a/components/ui/Navigation.tsx
+++ b/components/ui/Navigation.tsx
@@ -1,4 +1,4 @@
-import {Fragment} from 'react'
+import React, {Fragment, ReactNode} from 'react'
 import {usePathname} from 'next/navigation'
 import {Popover, Transition} from '@headlessui/react'
 import clsx from 'clsx'
@@ -113,3 +113,14 @@ export function DesktopNavigation(props: Props) {
     )
 }
 
+export function NavLink({href, children}: { href: string, children: ReactNode }) {
+    return (
+        <Link
+            href={href}
+            className="transition hover:text-indigo-500 dark:hover:text-indigo-400"
+        >
+            {children}
+        </Link>
+    )
+}
+