add Button component; pager updated

src/components/ArticleCardList.tsx

@@ -18,10 +18,6 @@ export const ArticleCardList:React.FC<IArticleCardListProps> = ({ articles, next
             }
         `}</style>
 
-        {!prevPage ? null : (
-            <Pager url={`/articles/${prevPage}`} position={'top'} />
-        )}
-
         <div className={'body'}>
             {articles.map((article, i) => {
                 const preview = {
@@ -40,8 +36,9 @@ export const ArticleCardList:React.FC<IArticleCardListProps> = ({ articles, next
             })}
         </div>
 
-        {!nextPage ? null : (
-            <Pager url={`/articles/${nextPage}`} position={'bottom'} />
-        )}
+        <Pager
+            nextHref={nextPage ? `/articles/${nextPage}` : null}
+            prevHref={prevPage ? `/articles/${prevPage}` : null}
+        />
     </div>
 )

src/components/Button/index.tsx

@@ -0,0 +1,25 @@
+import './styles.css'
+import Link from 'next/link'
+
+export type ButtonProps = {
+    style?: React.CSSProperties
+    href?: string
+}
+
+export const Button: React.FC<ButtonProps> = props => {
+    if (props.href) {
+        return (
+            <Link href={props.href}>
+                <a className={'button invisible'} style={props.style}>
+                    {props.children}
+                </a>
+            </Link>
+        )
+    }
+
+    return (
+        <button className={'button'} style={props.style}>
+            {props.children}
+        </button>
+    )
+}

src/components/Button/styles.css

@@ -0,0 +1,25 @@
+.button {
+    border: none;
+    font-size: var(--font-size-default);
+
+    text-align: center;
+    margin-top: var(--size-m);
+    margin-bottom: var(--size-m);
+    margin-left: 1px;
+    margin-right: 1px;
+
+    padding: var(--size-s) var(--size-m);
+    border-radius: 100px;
+
+    background-color: var(--color-back);
+    box-shadow: 0 0 0 1px rgba(27, 51, 88, 0.15);
+
+    transition: box-shadow 150ms;
+
+    outline: none;
+    cursor: pointer;
+}
+
+.button:hover {
+    box-shadow: 0 4px 20px rgba(27, 51, 88, 0.15)
+}

src/components/Pager/index.tsx

@@ -1,28 +1,20 @@
-import './styles.css'
-
-import Link from 'next/link'
-
-const text = ['↑', '↓']
-const linkText = ['Предыдущая страница', 'Следующая страница']
-
-type Position = 'top' | 'bottom'
-const i = (type: Position) => type === 'top'
-    ? 0
-    : 1
+import { Block } from '../Block'
+import { Button } from '../Button'
+import { Spacer } from '../Spacer'
 
 export type PagerProps = {
-    url: string
-    position: Position
+    nextHref: string | null
+    prevHref: string | null
 }
 
-export const Pager: React.FC<PagerProps> = ({ url, position }) => (
-    <div className={'pager'}>
-        <span className={'pager icon'}>
-            {text[i(position)]}
-        </span>
-
-        <Link href={url}>
-            <a>{linkText[i(position)]}</a>
-        </Link>
-    </div>
+export const Pager: React.FC<PagerProps> = props => (
+    <Block direction={'horizontal'}>
+        {!props.prevHref ? null : (
+            <Button href={props.prevHref}>Предыдущая страница</Button>
+        )}
+        <Spacer />
+        {!props.nextHref ? null : (
+            <Button href={props.nextHref}>Следущая страница</Button>
+        )}
+    </Block>
 )

src/components/Pager/styles.css

@@ -1,9 +0,0 @@
-.pager {
-    text-align: center;
-    margin-top: var(--size-m);
-    margin-bottom: var(--size-m);
-}
-
-.pager .icon {
-    margin: 0 var(--size-s);
-}

src/style.css

@@ -73,6 +73,10 @@
     --size-l: 2em;
     --size-xl: 5em;
 
+    /* EFFECTS */
+    --radius: 10px;
+    --shadow: 0 0 0 1px rgba(27, 51, 88, 0.15);
+
     /* MARGINS */
     --small-margin: 0.2em;
     --half-margin: 0.5em;