summaryrefslogtreecommitdiffstats
path: root/finished-application/frontend/components/Pagination.js
diff options
context:
space:
mode:
Diffstat (limited to 'finished-application/frontend/components/Pagination.js')
-rw-r--r--finished-application/frontend/components/Pagination.js27
1 files changed, 3 insertions, 24 deletions
diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js
index b77f8f6..f684840 100644
--- a/finished-application/frontend/components/Pagination.js
+++ b/finished-application/frontend/components/Pagination.js
@@ -6,6 +6,9 @@ import PropTypes from 'prop-types';
import gql from 'graphql-tag';
import Head from 'next/head';
import { perPage } from '../config';
+import PaginationStyles from './styles/PaginationStyles';
+
+
const PAGINATION_QUERY = gql`
query itemsConnection($skip: Int = 0, $first: Int = 4) {
@@ -17,30 +20,6 @@ const PAGINATION_QUERY = gql`
}
`;
-const PaginationStyles = styled.div`
- text-align: center;
- display: inline-grid;
- grid-template-columns: repeat(4, auto);
- align-items: stretch;
- justify-content: center;
- align-content: center;
- margin: 2rem 0;
- border: 1px solid ${props => props.theme.lightgrey};
- border-radius: 10px;
- & > * {
- margin: 0;
- padding: 15px 30px;
- border-right: 1px solid ${props => props.theme.lightgrey};
- &:last-child {
- border-right: 0;
- }
- }
- a[aria-disabled='true'] {
- color: grey;
- pointer-events: none;
- }
-`;
-
const Pagination = props => (
<Query query={PAGINATION_QUERY}>
{({ data, loading, error }) => {