Chore/cloud import project

README.md

@@ -1,4 +1,4 @@
-# Payload CMS Website
+# Payload CMS Website 
 
 This is the repository for [Payload's official website](https://payloadcms.com/). It was built completely in public using Payload itself, [more on that here](#⭐-the-cms).
 

src/adapters/AlgoliaPagination/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { usePagination } from 'react-instantsearch-hooks-web'
 
-import { ChevronIconV2 } from '@root/graphics/ChevronIconV2'
+import { ChevronIcon } from '@root/icons/ChevronIcon'
 
 import classes from './index.module.scss'
 
@@ -112,7 +112,7 @@ export const AlgoliaPagination: React.FC<{
         }}
         disabled={currentRefinement === 0}
       >
-        <ChevronIconV2 rotation={180} />
+        <ChevronIcon rotation={180} />
       </button>
       <div className={classes.nextPrev}>
         <button
@@ -126,7 +126,7 @@ export const AlgoliaPagination: React.FC<{
           }}
           disabled={currentRefinement >= nbPages - 1}
         >
-          <ChevronIconV2 />
+          <ChevronIcon />
         </button>
       </div>
     </div>

src/app/new/import/ImportProject.module.scss

@@ -108,10 +108,6 @@
     text-decoration: underline;
 }
 
-.importButton {
-    pointer-events: none;
-}
-
 .submit {
     display: none;
 }

src/components/Pagination/index.module.scss

@@ -11,12 +11,72 @@
 }
 
 .button {
-  background: var(--theme-elevation-500);
-  border: 0;
-  outline: none;
-  line-height: inherit;
-  font-size: inherit;
-  font-family: inherit;
+  all: unset;
   cursor: pointer;
-  padding: 0 calc(var(--base) / 2);
+  width: calc(var(--base) * 3);
+  height: calc(var(--base) * 3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid;
+  border-color: transparent;
+  margin-right: calc(var(--base) * 0.5);
+
+  svg {
+    width: var(--base);
+    height: var(--base);
+  }
+
+  &:hover {
+    border-color: #3C3C3C;
+  }
+
+  &.disabled {
+    cursor: default;
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
+  @include small-break {
+    width: calc(var(--base) * 2);
+    height: calc(var(--base) * 2);
+    margin-right: calc(var(--base) * 0.25);
+  }
+}
+
+.paginationButton {
+  all: unset;
+  cursor: pointer;
+  width: calc(var(--base) * 3);
+  height: calc(var(--base) * 3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid;
+  border-color: transparent;
+  margin-right: calc(var(--base) * 0.5);
+
+  &:hover {
+    border-color: #3C3C3C;
+  }
+
+  @include small-break {
+    width: calc(var(--base) * 2);
+    height: calc(var(--base) * 2);
+    margin-right: calc(var(--base) * 0.25);
+  }
+}
+
+.paginationButtonActive {
+  border: 1px solid #3C3C3C;
+}
+
+.dash {
+  margin-right: calc(var(--base) * 0.5);
+}
+
+.disabled {
+  pointer-events: none;
 }

src/components/Pagination/index.tsx

@@ -1,42 +1,120 @@
 import * as React from 'react'
 
+import { ChevronIcon } from '@root/icons/ChevronIcon'
+
 import classes from './index.module.scss'
 
 export const Pagination: React.FC<{
   page: number
   setPage: (page: number) => void
   totalPages: number
 }> = ({ page, setPage, totalPages }) => {
+  const [indexToShow, setIndexToShow] = React.useState([0, 1, 2, 3, 4])
+  const showFirstPage = totalPages > 5 && page >= 2
+  const showLastPage = totalPages > 5 && page <= totalPages - 3
+
+  React.useEffect(() => {
+    if (showFirstPage && showLastPage) {
+      setIndexToShow([1, 2, 3])
+    }
+
+    if (showFirstPage && !showLastPage) {
+      setIndexToShow([2, 3, 4])
+    }
+
+    if (!showFirstPage && showLastPage) {
+      setIndexToShow([0, 1, 2])
+    }
+
+    if (!showFirstPage && !showLastPage) {
+      setIndexToShow([0, 1, 2, 3, 4])
+    }
+  }, [showFirstPage, showLastPage])
+
   return (
     <div className={classes.pagination}>
+      {showFirstPage && (
+        <>
+          <button
+            type="button"
+            className={classes.paginationButton}
+            onClick={() => {
+              window.scrollTo(0, 0)
+              setPage(1)
+            }}
+          >
+            1
+          </button>
+          <div className={classes.dash}>&mdash;</div>
+        </>
+      )}
+      {[...Array(totalPages)].map((_, index) => {
+        const currentPage = index + 1
+        const isCurrent = page === currentPage
+
+        if (indexToShow.includes(index))
+          return (
+            <div key={index}>
+              <button
+                type="button"
+                className={[
+                  classes.paginationButton,
+                  isCurrent && classes.paginationButtonActive,
+                  isCurrent && classes.disabled,
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                onClick={() => {
+                  window.scrollTo(0, 0)
+                  setPage(currentPage)
+                }}
+              >
+                {currentPage}
+              </button>
+            </div>
+          )
+      })}
+      {showLastPage && (
+        <>
+          <div className={classes.dash}>&mdash;</div>
+          <button
+            type="button"
+            className={classes.paginationButton}
+            onClick={() => {
+              setTimeout(() => {
+                window.scrollTo(0, 0)
+              }, 0)
+              setPage(totalPages)
+            }}
+          >
+            {totalPages}
+          </button>
+        </>
+      )}
       <button
         disabled={page - 1 < 1}
         onClick={() => {
           if (page - 1 < 1) return
-
-          setTimeout(() => {
-            window.scrollTo(0, 0)
-          }, 0)
+          window.scrollTo(0, 0)
           setPage(page > 1 ? page - 1 : 1)
         }}
-        className={classes.button}
+        className={[classes.button, page - 1 < 1 && classes.disabled].filter(Boolean).join(' ')}
       >
-        &#8249;
+        <ChevronIcon rotation={180} />
       </button>
-      <span className={classes.page}>{`Page ${page} of ${totalPages}`}</span>
       <button
         disabled={page + 1 > totalPages}
         onClick={() => {
           if (page + 1 > totalPages) return
 
-          setTimeout(() => {
-            window.scrollTo(0, 0)
-          }, 0)
+          window.scrollTo(0, 0)
           setPage(page + 1)
         }}
-        className={classes.button}
+        className={[classes.button, page + 1 > totalPages && classes.disabled]
+          .filter(Boolean)
+          .join(' ')}
       >
-        &#8250;
+        <ChevronIcon />
       </button>
     </div>
   )

src/icons/ChevronIcon/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+
+import classes from '../index.module.scss'
+
+export const ChevronIcon: React.FC<IconProps> = props => {
+  const { rotation, size, className, bold } = props
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 12 27"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={[className, classes.icon, size && classes[size], bold && classes.bold]
+        .filter(Boolean)
+        .join(' ')}
+      style={{
+        transform: rotation ? `rotate(${rotation}deg)` : undefined,
+      }}
+    >
+      <path d="M1.40625 0.738037L14.1682 13.4999L1.40625 26.2618" className={classes.stroke} />
+    </svg>
+  )
+}