✨ Pagination for gists

components/RUA/Button.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+
+export type ButtonProps = {
+  children: React.ReactNode;
+  disabled?: boolean;
+};
+
+const Button = ({ children, disabled }: ButtonProps) => {
+  return (
+    <>
+      <button
+        className={classNames(
+          'bg-white border border-transparent hover:border-gray-200',
+          'outline-none hover:bg-gray-50 focus:ring-4 dark:border-transparent',
+          'focus:ring-cyan-200 font-medium rounded-lg text-sm',
+          'px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white ',
+          'dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:ring-cyan-800',
+          'transition-all disabled:hover:bg-gray-200',
+          'disabled:cursor-not-allowed disabled:dark:hover:bg-gray-700',
+          'disabled:hover:border-transparent',
+          'text-lg disabled:bg-gray-200 disabled:text-gray-500',
+          'dark:disabled:bg-gray-700 dark:disabled:text-gray-300',
+          'disabled:dark:hover:border-transparent'
+        )}
+        disabled={disabled}
+      >
+        {children}
+      </button>
+    </>
+  );
+};
+
+export default Button;

components/gists/FileContent.tsx

@@ -16,7 +16,7 @@ type Props = {
 const FileContent = ({ gists }: Props) => {
   return (
     <>
-      <div className="flex-1 py-4 overflow-hidden md:pl-8">
+      <div className="overflow-hidden">
         {gists.map((g) => (
           <div key={g.id}>
             {Object.keys(g.files).map((f) => (

components/gists/GistsCode.tsx

@@ -7,7 +7,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import { GistsFile } from 'types';
 import { unified } from 'unified';
-import styles from './styles.module.css';
+import styles from './GistsCode.module.css';
 
 interface Props {
   file: GistsFile;

components/gists/Pagination.tsx

@@ -0,0 +1,48 @@
+import { pageSize } from 'lib/fetcher';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+
+const Button = dynamic(() => import('components/RUA/Button'));
+
+type Props = {
+  pageSize: pageSize;
+};
+
+const Pagination = ({ pageSize }: Props) => {
+  const prev = Number(pageSize.prev);
+  const next = Number(pageSize.next);
+
+  return (
+    <>
+      <nav>
+        <ul className="flex justify-between -space-x-px">
+          <li>
+            {!!prev ? (
+              <Link href={prev === 1 ? `/gists/` : `/gists/${prev}`} passHref>
+                <a>
+                  <Button>Prev</Button>
+                </a>
+              </Link>
+            ) : (
+              <Button disabled>Prev</Button>
+            )}
+          </li>
+
+          <li>
+            {!!next ? (
+              <Link href={`/gists/${next}`} passHref>
+                <a>
+                  <Button>Next</Button>
+                </a>
+              </Link>
+            ) : (
+              <Button disabled>Next</Button>
+            )}
+          </li>
+        </ul>
+      </nav>
+    </>
+  );
+};
+
+export default Pagination;