feat(admin): initial per page component

src/admin/components/elements/PerPage/index.scss

@@ -0,0 +1,48 @@
+@import '../../../scss/styles.scss';
+
+.per-page {
+  display: flex;
+  margin-bottom: $baseline;
+  margin-right: 0;
+  margin-left: auto;
+
+  button {
+    padding: base(.25) 0;
+    line-height: base(1);
+    background: transparent;
+    border: 0;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  span {
+    color: $color-gray;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    text-align: left;
+    margin: 0;
+
+    li {
+      text-decoration: none;
+    }
+
+    a {
+      color: $color-gray;
+      &:visited, &:link, &:active  {
+        text-decoration: none;
+      }
+    }
+  }
+}

src/admin/components/elements/PerPage/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import './index.scss';
+import { Link } from 'react-router-dom';
+import Popup from '../Popup';
+import Chevron from '../../icons/Chevron';
+
+const baseClass = 'per-page';
+type Props = {
+  valueOptions: number[];
+}
+
+const PerPage: React.FC<Props> = ({ valueOptions }) => (
+  <div className={baseClass}>
+    <Popup
+      horizontalAlign="center"
+      button={(
+        <div>
+          Per Page:
+          <Chevron />
+        </div>
+      )}
+      backgroundColor="#333333"
+      render={({ close }) => (
+        <div>
+          <ul>
+            {valueOptions.map((option, i) => (
+              <li
+                className={`${baseClass}-item`}
+                key={i}
+              >
+                <Link
+                  to="/asdf"
+                  onClick={close}
+                >
+                  {option}
+                </Link>
+
+              </li>
+            ))}
+
+          </ul>
+        </div>
+      )}
+    />
+  </div>
+);
+
+export default PerPage;

src/admin/components/elements/Popup/index.tsx

@@ -23,6 +23,8 @@ const Popup: React.FC<Props> = (props) => {
     horizontalAlign = 'left',
     initActive = false,
     onToggleOpen,
+    backgroundColor,
+    padding,
   } = props;
 
   const buttonRef = useRef(null);
@@ -98,7 +100,9 @@ const Popup: React.FC<Props> = (props) => {
   ].filter(Boolean).join(' ');
 
   return (
-    <div className={classes}>
+    <div
+      className={classes}
+    >
       <div
         ref={buttonRef}
         className={`${baseClass}__wrapper`}
@@ -133,9 +137,22 @@ const Popup: React.FC<Props> = (props) => {
       <div
         className={`${baseClass}__content`}
         ref={contentRef}
+        style={{
+          backgroundColor,
+        }}
+
       >
-        <div className={`${baseClass}__wrap`}>
-          <div className={`${baseClass}__scroll`}>
+        <div
+          className={`${baseClass}__wrap`}
+          // TODO: color ::after with bg color
+        >
+
+          <div
+            className={`${baseClass}__scroll`}
+            style={{
+              padding,
+            }}
+          >
             {render && render({ close: () => setActive(false) })}
             {children && children}
           </div>

src/admin/components/elements/Popup/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 export type Props = {
     className?: string
     render?: (any) => void,
@@ -10,4 +12,6 @@ export type Props = {
     showOnHover?: boolean,
     initActive?: boolean,
     onToggleOpen?: () => void,
+    backgroundColor?: CSSProperties['backgroundColor'],
+    padding?: CSSProperties['padding'],
 }

src/admin/components/views/collections/List/Default.tsx

@@ -13,6 +13,7 @@ import { Props } from './types';
 
 import './index.scss';
 import ViewDescription from '../../../elements/ViewDescription';
+import PerPage from '../../../elements/PerPage';
 
 const baseClass = 'collection-list';
 
@@ -114,6 +115,7 @@ const DefaultList: React.FC<Props> = (props) => {
           </div>
         )}
         <div className={`${baseClass}__page-controls`}>
+
           <Paginator
             limit={data.limit}
             totalPages={data.totalPages}
@@ -124,6 +126,9 @@ const DefaultList: React.FC<Props> = (props) => {
             nextPage={data.nextPage}
             numberOfNeighbors={1}
           />
+          <PerPage
+            valueOptions={[10, 20, 50, 100]}
+          />
           {data?.totalDocs > 0 && (
             <div className={`${baseClass}__page-info`}>
               {(data.page * data.limit) - (data.limit - 1)}