Add post card margin

* Add about page
* Add github icon on footer

components/Footer.tsx

@@ -1,14 +1,25 @@
 import { FC } from 'react';
+import { FiGithub } from 'react-icons/fi';
 
 const nowDay = new Date().getFullYear();
 
 const Footer: FC = () => {
   return (
     <>
-      <footer className="max-w-6xl px-10 mx-auto lg:px-0">
+      <footer className="max-w-6xl px-10 mx-auto xl:px-0">
         <div className="h-[2px] bg-slate-500"></div>
-        <div className="py-4">
-          &copy; 2022-{nowDay} Powered by Next.js 💙 xfy
+
+        <div className="flex items-center justify-between py-4">
+          <div>&copy; 2022-{nowDay} Powered by Next.js 💙 xfy</div>
+          <div>
+            <a
+              href="https://github.com/DefectingCat"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FiGithub />
+            </a>
+          </div>
         </div>
       </footer>
     </>

components/NavBar.tsx

@@ -17,6 +17,11 @@ const txtMenu = [
     name: 'Blog',
     path: '/blog',
   },
+  {
+    id: 2,
+    name: 'About',
+    path: '/about',
+  },
 ];
 
 const HeadBar: FC = () => {
@@ -27,7 +32,7 @@ const HeadBar: FC = () => {
       <header
         className={cn(
           'flex justify-between mx-auto',
-          'max-w-6xl p-6 lg:px-0 h-[84px]',
+          'max-w-6xl p-6 xl:px-0 h-[84px]',
           'items-center relative'
         )}
       >

components/PostCard.tsx

@@ -18,7 +18,8 @@ const PostCard: FC<Props> = ({ post }) => {
               'hover:bg-sky-100 hover:bg-opacity-50',
               // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
               'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
-              'flex items-center justify-between'
+              'flex items-center justify-between',
+              'mb-4'
             )}
           >
             <div>

layouts/MainLayout.tsx

@@ -9,7 +9,7 @@ const MainLayout: FC = ({ children }) => {
     <>
       <HeadBar />
 
-      <main>{children}</main>
+      {children}
 
       <Footer />
     </>

pages/about.tsx

@@ -0,0 +1,18 @@
+import MainLayout from 'layouts/MainLayout';
+import { NextPageWithLayout } from 'types';
+
+const About: NextPageWithLayout = () => {
+  return (
+    <>
+      <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
+        <div className="w-full max-w-3xl px-10 text-2xl lg:px-0"></div>
+      </main>
+    </>
+  );
+};
+
+About.getLayout = function getLayout(page) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default About;

pages/p/second-post.mdx

@@ -0,0 +1,23 @@
+---
+title: Second post test
+date: '2022-03-25'
+tags: ['functions', 'JavaScript']
+---
+
+import Layout from 'layouts/MDXLayout.tsx';
+
+# Hello world
+
+## Hello
+
+This is my second post.
+
+```tsx
+console.log('Hello world.');
+```
+
+### h3
+
+this is h3 test
+
+export default ({ children }) => <Layout>{children}</Layout>;