update components folders and add fetch real data from github

src/components/Loading.tsx

@@ -0,0 +1,3 @@
+export function Loading() {
+  return <div className="flex w-full justify-center items-center p-2 text-lg">Loading...</div>;
+}

src/main.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';

src/pages/Blog/Blog.tsx

@@ -0,0 +1,49 @@
+import { Input } from '@components/forms/Input';
+import { BlogHeader } from './components/BlogHeader';
+import { ProfileResume } from './components/ProfileResume';
+import { Scrollbars } from 'rc-scrollbars';
+import { useQuery } from 'react-query';
+import Markdown from 'react-markdown';
+import { service } from '@services/axiosConfig';
+import { Issue, Item } from '../../models/issue.interface';
+import { formatDistanceToNow } from 'date-fns';
+
+export function Blog() {
+  const { data } = useQuery<Issue>('posts', async () => {
+    const res = (await service.get('/search/issues?q=repo:davidrock/github-blog')).data;
+
+    console.log(res);
+    return res;
+  });
+
+  return (
+    <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">
+          <ProfileResume />
+          <div className="flex flex-col">
+            <div className="flex items-center justify-between mt-16 mb-6">
+              <h3>Posts</h3>
+              <span>{data?.total_count} posts</span>
+            </div>
+            <Input placeholder="Search content..." />
+            <div className="grid grid-cols-2 gap-8 my-8">
+              {data?.items.map((p: Item) => (
+                <div key={p?.id} className="flex flex-col rounded-lg bg-base-post p-8 h-[416px] cursor-pointer">
+                  <div className="flex justify-between mb-5">
+                    <h1 className="text-lg w-2/3">{p.title}</h1>
+                    <span className="text-xs">{formatDistanceToNow(p.updated_at, { addSuffix: true })}</span>
+                  </div>
+                  <div className="text-xs text-ellipsis overflow-hidden">
+                    <Markdown>{p.body}</Markdown>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Scrollbars>
+    </div>
+  );
+}

src/pages/Blog/components/ProfileResume.tsx

@@ -1,36 +1,51 @@
+import { service } from '@services/axiosConfig';
+import { useQuery } from 'react-query';
 import { FaGithub } from 'react-icons/fa6';
 import { FaBuilding } from 'react-icons/fa6';
 import { FaUserGroup } from 'react-icons/fa6';
 import { FaArrowUpRightFromSquare } from 'react-icons/fa6';
+import { Profile } from '@models';
+import { Loading } from '@components/Loading';
 
 export function ProfileResume() {
+  const { data, isFetched } = useQuery<Profile>(
+    'profile',
+    async () => {
+      return (await service.get('/users/davidrock')).data;
+    },
+    { refetchInterval: false },
+  );
+
   return (
     <div className="flex gap-10 bg-base-profile py-8 px-10 rounded-2xl drop-shadow-lg">
-      <img src="https://avatars.githubusercontent.com/u/19226926?v=4" className="rounded-xl w-[148px] h-[148px]" />
-      <div className="flex flex-col gap-2">
-        <h1>David Rock</h1>
-        <p className="text-sm">
-          Tristique volutpat pulvinar vel massa, pellentesque egestas. Eu viverra massa quam dignissim aenean malesuada
-          suscipit. Nunc, volutpat pulvinar vel mass.
-        </p>
-        <div className="flex gap-6 items-center mt-4">
-          <div className="flex items-center gap-2">
-            <FaGithub /> davidrock
-          </div>
-          <div className="flex items-center gap-2">
-            <FaBuilding /> Booking.com
-          </div>
-          <div className="flex items-center gap-2">
-            <FaUserGroup /> 32 seguidores
+      {isFetched ? (
+        <>
+          <img src={data?.avatar_url} className="rounded-xl w-[148px] h-[148px]" />
+          <div className="flex flex-col gap-2">
+            <h1>{data?.name}</h1>
+            <p className="text-sm">{data?.bio}</p>
+            <div className="flex gap-6 items-center mt-4">
+              <div className="flex items-center gap-2">
+                <FaGithub /> {data?.login}
+              </div>
+              <div className="flex items-center gap-2">
+                <FaBuilding /> {data?.company}
+              </div>
+              <div className="flex items-center gap-2">
+                <FaUserGroup /> {data?.followers}
+              </div>
+            </div>
+            <div className="absolute right-10 flex flex-row text-xs">
+              <a href="https://github.com/davidrock" className="flex items-center gap-2">
+                GITHUB
+                <FaArrowUpRightFromSquare width={12} height={12} />
+              </a>
+            </div>
           </div>
-        </div>
-        <div className="absolute right-10 flex flex-row text-xs">
-          <a href="https://github.com" className="flex items-center gap-2">
-            GITHUB
-            <FaArrowUpRightFromSquare width={12} height={12} />
-          </a>
-        </div>
-      </div>
+        </>
+      ) : (
+        <Loading />
+      )}
     </div>
   );
 }

src/pages/Blog/index.ts

@@ -0,0 +1,3 @@
+export * from './Blog';
+export * from './components/BlogHeader';
+export * from './components/ProfileResume';

src/pages/Post/Post.tsx

@@ -0,0 +1,7 @@
+export function Post() {
+  return (
+    <>
+      <h1>Post</h1>
+    </>
+  );
+}

src/pages/Post/index.ts

@@ -0,0 +1 @@
+export * from '.';