Update pagination styling

fix padding issue

components/mdx/Anchor.tsx

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, forwardRef } from 'react';
 import cn from 'classnames';
 import { FiExternalLink } from 'react-icons/fi';
 
@@ -6,29 +6,33 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
   external?: boolean;
 }
 
-const Anchor = ({ children, external = true, ...rest }: Props) => {
-  return (
-    <>
-      <a
-        {...rest}
-        className="inline-block"
-        target={external ? '_blank' : undefined}
-      >
-        <span
-          className={cn(
-            'mx-[2px] text-teal-500 relative',
-            'before:left-0 before:top-[1px] before:block before:absolute',
-            'before:w-full before:h-full before:transition-all before:shadow-underline',
-            'hover:before:shadow-throughline',
-            'dark:text-teal-600'
-          )}
+const Anchor = forwardRef<HTMLAnchorElement, Props>(
+  ({ children, external = true, ...rest }, ref) => {
+    return (
+      <>
+        <a
+          ref={ref}
+          {...rest}
+          className="inline-block"
+          target={external ? '_blank' : undefined}
         >
-          {children}
-          {external && <FiExternalLink className="inline ml-1 mb-[0.2rem]" />}
-        </span>
-      </a>
-    </>
-  );
-};
+          <span
+            className={cn(
+              'mx-[2px] text-teal-500 relative',
+              'before:left-0 before:top-[1px] before:block before:absolute',
+              'before:w-full before:h-full before:transition-all before:shadow-underline',
+              'hover:before:shadow-throughline',
+              'dark:text-teal-600'
+            )}
+          >
+            {children}
+            {external && <FiExternalLink className="inline ml-1 mb-[0.2rem]" />}
+          </span>
+        </a>
+      </>
+    );
+  }
+);
+Anchor.displayName = 'Anchor';
 
 export default Anchor;

pages/blog/[page].tsx

@@ -28,7 +28,7 @@ const BlogPage = ({
         </BlogList>
 
         <Pagination
-          className="py-6 px-7 lg:px-5"
+          className="py-6 mt-4 px-7 lg:px-5"
           hasPrev={!!prev}
           hasNext={next === total}
           prevLink={prev === 1 ? '/blog' : `/blog/${prev}`}

pages/blog/index.tsx

@@ -1,4 +1,3 @@
-import cn from 'classnames';
 import PostCardLoading from 'components/RUA/loading/PostCardLoading';
 import { postLists, PostPerPage } from 'lib/posts';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
@@ -15,7 +14,6 @@ const Pagination = dynamic(() => import('components/RUA/RUAPagination'));
 
 const Blog = ({
   posts,
-  prev,
   next,
   total,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
@@ -29,7 +27,7 @@ const Blog = ({
         </BlogList>
 
         <Pagination
-          className="py-6 px-7 lg:px-5"
+          className="py-6 mt-4 px-7 lg:px-5"
           hasPrev={false}
           hasNext={next === total}
           prevLink={''}
@@ -44,7 +42,6 @@ const Blog = ({
 
 export const getStaticProps: GetStaticProps<{
   posts: Post[];
-  prev: number;
   next: number;
   total: number;
 }> = async () => {
@@ -53,7 +50,6 @@ export const getStaticProps: GetStaticProps<{
     props: {
       // Latest posts.
       posts: posts.slice(0, PostPerPage),
-      prev: 0,
       next: 2,
       total: Math.ceil(posts.length / PostPerPage),
     },

pages/gists/[p].tsx

@@ -26,9 +26,10 @@ const Gists = ({
         <div className="md:flex">
           <UserInfo user={user} />
 
-          <div className="flex-1 py-4 overflow-hidden md:pl-8">
+          <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
             <FileContent gists={gists.gists} />
             <Pagination
+              className="mt-4"
               hasPrev={!!prev}
               hasNext={!!next}
               prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}

pages/gists/index.tsx

@@ -25,9 +25,10 @@ const Gists = ({
         <div className="md:flex">
           <UserInfo user={user} />
 
-          <div className="flex-1 py-4 overflow-hidden md:pl-8">
+          <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
             <FileContent gists={gists.gists} />
             <Pagination
+              className="mt-4"
               hasPrev={!!prev}
               hasNext={!!next}
               prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}