From 406c660f41e5d0b3d0e8e7fb4b7980f2fdff2d3e Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 18 Feb 2020 17:09:21 +0300
Subject: [PATCH] pager update

---
 src/components/ArticleCardList.tsx  |  6 ++---
 src/components/Pager/index.tsx      | 34 +++++++++++++++++++++++++++++
 src/components/Paginator.js         | 21 ------------------
 src/style/components/Paginator.scss | 10 ---------
 src/style/style.scss                |  1 -
 5 files changed, 37 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Pager/index.tsx
 delete mode 100644 src/components/Paginator.js
 delete mode 100644 src/style/components/Paginator.scss

diff --git a/src/components/ArticleCardList.tsx b/src/components/ArticleCardList.tsx
index 9ee98ae1..d87a5471 100644
--- a/src/components/ArticleCardList.tsx
+++ b/src/components/ArticleCardList.tsx
@@ -1,5 +1,5 @@
-import Paginator from './Paginator'
 import { ArticleCard } from './ArticleCard'
+import { Pager } from './Pager'
 
 export interface IArticleCardListProps {
     articles: any[]
@@ -19,7 +19,7 @@ export const ArticleCardList:React.FC<IArticleCardListProps> = ({ articles, next
         `}</style>
 
         {!prevPage ? null : (
-            <Paginator url={`/articles/${prevPage}`} type="top" />
+            <Pager url={`/articles/${prevPage}`} position={'top'} />
         )}
 
         <div className={'body'}>
@@ -41,7 +41,7 @@ export const ArticleCardList:React.FC<IArticleCardListProps> = ({ articles, next
         </div>
 
         {!nextPage ? null : (
-            <Paginator url={`/articles/${nextPage}`} type="bottom" />
+            <Pager url={`/articles/${nextPage}`} position={'bottom'} />
         )}
     </div>
 )
diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx
new file mode 100644
index 00000000..561d817d
--- /dev/null
+++ b/src/components/Pager/index.tsx
@@ -0,0 +1,34 @@
+const text = ['↑', '↓']
+const linkText = ['Предыдущая страница', 'Следующая страница']
+
+type Position = 'top' | 'bottom'
+const i = (type: Position) => type === 'top'
+    ? 0
+    : 1
+
+export type PagerProps = {
+    url: string
+    position: Position
+}
+
+export const Pager: React.FC<PagerProps> = ({ url, position }) => (
+    <div>
+        <style jsx>{`
+            div {
+                text-align: center;
+                margin-top: var(--size-m);
+                margin-bottom: var(--size-m);
+            }
+
+            span {
+                margin: 0 var(--size-s);
+            }
+        `}</style>
+
+        <span>
+            {text[i(position)]}
+        </span>
+
+        <a href={url}>{linkText[i(position)]}</a>
+    </div>
+)
diff --git a/src/components/Paginator.js b/src/components/Paginator.js
deleted file mode 100644
index 30f0de90..00000000
--- a/src/components/Paginator.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const React = require('react')
-
-const text = ['↑', '↓']
-const linkText = ['Предыдущая страница', 'Следующая страница']
-
-const i = type => type === 'top'
-	? 0
-	: 1
-
-const Icon = ({children}) => (
-	<span className="Paginator-Icon">{children}</span>
-)
-
-const Paginator = ({url, type}) => (
-	<div className="Paginator">
-		<Icon>{text[i(type)]}</Icon>
-		<a href={url}>{linkText[i(type)]}</a>
-	</div>
-)
-
-module.exports = Paginator
diff --git a/src/style/components/Paginator.scss b/src/style/components/Paginator.scss
deleted file mode 100644
index c30feff5..00000000
--- a/src/style/components/Paginator.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.Paginator {
-  text-align: center;
-  font-size: var(--font-size-second);
-
-  margin: var(--single-margin) 0;
-}
-
-.Paginator-Icon {
-  margin: 0 10px;
-}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index fde37379..fc2389e2 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -6,7 +6,6 @@
 @import "components/schedule-table";
 @import "components/footer-links";
 @import "components/Article";
-@import "components/Paginator";
 @import "components/album";
 @import "components/ArticleTags";