Added footer and style for nav and link hover

components/layout/footer.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+
+const Footer = () => {
+  return (
+    <footer
+      className={cn(
+        'flex flex-row mx-auto space-x-8 w-full mt-8',
+        'text-gray-500',
+        'place-content-center',
+      )}
+    >
+      <a
+        href='https://github.com/travisvn/next-mdx-template'
+        className='hover:ring-2 rounded-md px-2 py-1 duration-150 active:scale-95 active:duration-0'
+        target='_blank'
+      >
+        View on GitHub
+      </a>
+    </footer>
+  )
+}
+
+export default Footer

components/layout/main-layout.tsx

@@ -1,10 +1,12 @@
 import { cn } from '@/lib/utils'
 import NavBar from '@/components/layout/navbar'
+import Footer from '@/components/layout/footer'
 
 type Props = {
   children?: React.ReactNode
 }
 
+
 const MainLayout = ({ children }: Props) => {
   return (
     <>
@@ -18,6 +20,7 @@ const MainLayout = ({ children }: Props) => {
           )}>
           <NavBar />
           {children}
+          <Footer />
         </div>
       </div>
     </>

components/layout/navbar.tsx

@@ -26,7 +26,7 @@ const NavBar = () => {
                 <Link
                   key={path}
                   href={path}
-                  className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2 m-1"
+                  className='hover:ring-2 rounded-md px-2 py-1 duration-150 active:scale-95 active:duration-0'
                 >
                   {name}
                 </Link>

components/posts.tsx

@@ -2,6 +2,7 @@ import { postUrl } from '@/config/site'
 import { formatDate, getBlogPosts } from '@/utils/mdx-utils'
 import Link from 'next/link'
 
+
 const BlogPosts = () => {
   let allBlogs = getBlogPosts()