From 6186f1078152c1e99743b32e4114f3c1f29abc90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Tue, 28 Nov 2023 21:45:04 -0300
Subject: [PATCH] feat(ui): add top links on blog page

* Add link to T.I.L page
* Add link to Categories page
* Add link to Tags page
---
 src/app/blog/page.tsx           | 26 ++++++++++++++++++++++++++
 src/shared/components/title.tsx |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 57b6a20b..a9e98a41 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,17 +1,43 @@
 import React from 'react'
+import Link, { LinkProps } from 'next/link'
 
 import { allPosts } from 'contentlayer/generated'
+import {
+  FolderOpen,
+  Tag,
+  Notebook,
+  Icon as PhosphorIcon
+} from '@/shared/wrappers/phosphor-icons'
 import { getSortedPosts } from '@/shared/lib/get-sorted-posts'
 
 import { PostList } from '@/shared/components/post-list'
 import { Title } from '@/shared/components/title'
 
+type TopLinkProps = {
+  Icon: PhosphorIcon
+  title: string
+} & LinkProps
+const TopLink = ({ Icon, title, ...rest }: TopLinkProps) => (
+  <Link
+    {...rest}
+    className="inline-flex items-center gap-1 rounded-lg p-2 leading-none text-neutral-700 transition-colors hover:bg-neutral-200/50 hover:text-neutral-900 dark:text-neutral-300 hover:dark:bg-neutral-900 dark:hover:text-neutral-100"
+  >
+    <Icon />
+    <span>{title}</span>
+  </Link>
+)
+
 export default function Page() {
   const posts = getSortedPosts(allPosts)
 
   return (
     <div className="content-container m-auto">
       <Title text="Blog" />
+      <div className="flex flex-wrap justify-center gap-4 py-4 md:justify-start">
+        <TopLink Icon={FolderOpen} href="/blog/categories" title="Categories" />
+        <TopLink Icon={Tag} href="/blog/tag" title="Tags" />
+        <TopLink Icon={Notebook} href="/blog/til" title="T.I.L" />
+      </div>
       <PostList posts={posts} separateByYear />
     </div>
   )
diff --git a/src/shared/components/title.tsx b/src/shared/components/title.tsx
index 361a907e..f03f07b4 100644
--- a/src/shared/components/title.tsx
+++ b/src/shared/components/title.tsx
@@ -7,7 +7,7 @@ interface Props extends ComponentProps<'h1'> {
 
 export function Title({ text, description, ...props }: Props) {
   return (
-    <div className="mb-8 flex flex-col items-center md:items-start">
+    <div className="flex flex-col items-center md:items-start">
       <h1
         {...props}
         className="w-fit bg-gradient-to-br from-neutral-900 via-neutral-900/90 to-neutral-900/70 bg-clip-text text-4xl font-semibold text-transparent dark:from-neutral-300 dark:via-neutral-300/90 dark:to-neutral-300/70"