From dbd0f74bea2a56576eeec0c530abf4bad7f8f3bf Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Tue, 10 Mar 2020 19:03:43 -0300
Subject: [PATCH] feat: Study List Pagination (#1502)

* remove unused file

* add new color

* pagination handler
---
 .../components/StudyListPagination.js         | 70 ++++++++++++++++++-
 platform/ui/tailwind.config.js                |  1 +
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/views/StudyList/components/StudyListPagination.js b/platform/ui/src/views/StudyList/components/StudyListPagination.js
index 6bc2813e4..9a8f599cd 100644
--- a/platform/ui/src/views/StudyList/components/StudyListPagination.js
+++ b/platform/ui/src/views/StudyList/components/StudyListPagination.js
@@ -1,7 +1,71 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  Typography,
+  ButtonGroup,
+  Button,
+  IconButton,
+} from '../../../components/';
 
-const StudyListPagination = () => {
-  return <div>{`<- PAGINATION CONTENT ->`}</div>;
+const StudyListPagination = props => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const navigateToPage = page => {
+    const toPage = page < 1 ? 1 : page;
+    setCurrentPage(toPage);
+  };
+
+  return (
+    <div className="bg-black py-10">
+      <div className="container m-auto relative px-8">
+        <div className="flex justify-between">
+          <div className="flex items-center">
+            <select
+              defaultValue="25"
+              className="bg-black text-white border border-custom-darkSlateBlue text-base h-8 mr-3 focus:outline-none"
+            >
+              <option value="25">25</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+            </select>
+            <Typography className="text-base opacity-60">
+              Results per page
+            </Typography>
+          </div>
+          <div className="">
+            <div className="flex items-center">
+              <Typography className="opacity-60 mr-4 text-base">
+                Page {currentPage}
+              </Typography>
+              <ButtonGroup color="primary">
+                <IconButton
+                  size="small"
+                  className="border-custom-darkSlateBlue px-4"
+                  color="white"
+                  onClick={() => navigateToPage(1)}
+                >
+                  <>{`<<`}</>
+                </IconButton>
+                <Button
+                  size="small"
+                  className="border-custom-darkSlateBlue"
+                  color="white"
+                  onClick={() => navigateToPage(currentPage - 1)}
+                >{`< Previous`}</Button>
+                <Button
+                  size="small"
+                  className="border-custom-darkSlateBlue"
+                  color="white"
+                  onClick={() => navigateToPage(currentPage + 1)}
+                >
+                  {`Next >`}
+                </Button>
+              </ButtonGroup>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default StudyListPagination;
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index 6240d6e3d..62fc1193d 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -31,6 +31,7 @@ module.exports = {
         grayBright: '#e1e1e1',
         grayLight: '#a19fad',
         gray: '#726f7e',
+        darkSlateBlue: '#2c3074',
       },
       /** END CUSTOM THEME COLORS */