fix routes and create Title component for posts

src/pages/Blog/Blog.tsx

@@ -7,15 +7,21 @@ import Markdown from 'react-markdown';
 import { service } from '@services/axiosConfig';
 import { Issue, Item } from '../../models/issue.interface';
 import { formatDistanceToNow } from 'date-fns';
+import { useNavigation } from 'react-router-dom';
 
 export function Blog() {
+  const navigation = useNavigation();
   const { data } = useQuery<Issue>('posts', async () => {
     const res = (await service.get('/search/issues?q=repo:davidrock/github-blog')).data;
 
     console.log(res);
     return res;
   });
 
+  function handlePostClick(){
+    navigation
+  }
+
   return (
     <div className="flex flex-col w-full bg-base-background">
       <Scrollbars autoHideDuration={200} autoHideTimeout={1000} style={{ width: '100%', height: '100vh' }}>

src/pages/Post/Post.tsx

@@ -1,7 +1,19 @@
-export function Post() {
+import { BlogHeader } from '@pages/Blog';
+import Scrollbars from 'rc-scrollbars';
+import { Item } from '../../models/issue.interface';
+import { Title } from './components/Title';
+
+type PostProps = {
+  post?: Item;
+};
+
+export function Post({ post }: PostProps) {
   return (
-    <>
-      <h1>Post</h1>
-    </>
+    <div className="flex flex-col w-full bg-base-background">
+      <Scrollbars autoHideDuration={200} autoHideTimeout={1000} style={{ width: '100%', height: '100vh' }}>
+        <BlogHeader />
+        <div className="container max-w-[1048px] mx-auto -mt-20 z-10">{post && <Title post={post} />}</div>
+      </Scrollbars>
+    </div>
   );
 }

src/pages/Post/components/Title.tsx

@@ -0,0 +1,42 @@
+import { FaGithub, FaUserGroup, FaArrowUpRightFromSquare, FaCalendar, FaChevronLeft } from 'react-icons/fa6';
+import { Item } from '../../../models/issue.interface';
+import { formatDistanceToNow } from 'date-fns';
+
+type ItemProps = {
+  post: Item;
+};
+
+export function Title({ post }: ItemProps) {
+  return (
+    <div className="flex gap-10 bg-base-profile py-8 px-10 rounded-2xl drop-shadow-lg">
+      <div className="flex">
+        <div className="absolute right-10 flex flex-row text-xs">
+          <a href="https://github.com/davidrock" className="flex items-center gap-2">
+            Back
+            <FaArrowUpRightFromSquare width={12} height={12} />
+          </a>
+        </div>
+        <div className="absolute right-10 flex flex-row text-xs">
+          <a href="https://github.com/davidrock" className="flex items-center gap-2">
+            Go to Github
+            <FaChevronLeft width={12} height={12} />
+          </a>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h1>{post?.title}</h1>
+        <div className="flex gap-6 items-center mt-4">
+          <div className="flex items-center gap-2">
+            <FaGithub /> {post?.user.login}
+          </div>
+          <div className="flex items-center gap-2">
+            <FaCalendar /> {formatDistanceToNow(post.updated_at, { addSuffix: true })}
+          </div>
+          <div className="flex items-center gap-2">
+            <FaUserGroup /> {post.comments} comments
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/routes.tsx

@@ -19,7 +19,7 @@ export const routes = createBrowserRouter([
     errorElement: <MyFallbackComponent />,
   },
   {
-    path: '/post',
+    path: '/github-blog/post',
     element: <Post />,
     errorElement: <MyFallbackComponent />,
   },