pager update

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>
 )

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>
+)

src/components/Paginator.js

@@ -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

src/style/components/Paginator.scss

@@ -1,10 +0,0 @@
-.Paginator {
-  text-align: center;
-  font-size: var(--font-size-second);
-
-  margin: var(--single-margin) 0;
-}
-
-.Paginator-Icon {
-  margin: 0 10px;
-}

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";