feat(ui): create Footer component for blog section

mateusfg7 · Jun 20, 2023 · 7853ed0 · 7853ed0
1 parent 152ed28
commit 7853ed0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/src/app/(blog)/components/footer.tsx b/src/app/(blog)/components/footer.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from 'react'
+import NextLink from 'next/link'
+import { ArrowUpRight } from '@/shared/lib/phosphor-icons'
+
+export function Footer() {
+  const Link = ({ href, children }: { href: string; children: ReactNode }) => (
+    <NextLink
+      className="inline-flex items-end gap-px hover:text-neutral-900 hover:dark:text-neutral-200"
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {children}
+    </NextLink>
+  )
+
+  const ArrowIcon = () => <ArrowUpRight className="text-xs" />
+
+  return (
+    <div className="mt-28 border-t border-neutral-300/30 py-11 dark:border-neutral-800/20">
+      <div className="blog-content-w m-auto flex items-center justify-between leading-none">
+        <div className="flex gap-4 text-neutral-500 dark:text-neutral-400">
+          <Link href="https://github.com/mateusfg7/mfg-b/blob/main/LICENSE">
+            <span>License</span>
+            <ArrowIcon />
+          </Link>
+          <Link href="/sitemap.xml">
+            <span>Sitemap</span>
+            <ArrowIcon />
+          </Link>
+          <Link href="/feed">
+            <span>RSS</span>
+            <ArrowIcon />
+          </Link>
+          <Link href="https://github.com/mateusfg7/mfg-b">
+            <span>Github</span>
+            <ArrowIcon />
+          </Link>
+        </div>
+        <div className="text-dm text-neutral-400 dark:text-neutral-500">
+          Built with <Link href="https://nextjs.org/">Next.js</Link>,{' '}
+          <Link href="https://mdxjs.com/">MDX</Link>,{' '}
+          <Link href="https://tailwindcss.com/">Tailwindcss</Link> and{' '}
+          <Link href="https://www.contentlayer.dev/">Contentlayer</Link> by{' '}
+          <Link href="https://github.com/mateusfg7">Mateus Felipe</Link>.
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/(blog)/layout.tsx b/src/app/(blog)/layout.tsx
@@ -1,3 +1,4 @@
+import { Footer } from './components/footer'
 import { Header } from './components/header'
 
 export default function BlogLayout({
@@ -9,7 +10,8 @@ export default function BlogLayout({
     <html>
       <body>
         <Header />
-        <div className="py-48 md:py-36">{children}</div>
+        <div className="pt-48 md:pt-36">{children}</div>
+        <Footer />
       </body>
     </html>
   )