From 93d9021ac0bb4e548bc2ae05ff6b130ca10de6be Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 18 Feb 2020 20:35:16 +0300
Subject: [PATCH] article card uses next link

---
 src/components/ArticleCard/index.tsx | 47 +++++++++++++++-------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx
index a96491b3..a164a47c 100644
--- a/src/components/ArticleCard/index.tsx
+++ b/src/components/ArticleCard/index.tsx
@@ -3,6 +3,7 @@ import './styles.css'
 import cx from 'classnames'
 import { Date } from './Date'
 import { IImage } from 'src/types'
+import Link from 'next/link'
 
 export interface IArticleCardProps {
     article: any
@@ -11,29 +12,31 @@ export interface IArticleCardProps {
 
 export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props }) => (
     <section className="ArticleCard">
-        <a className="invisible" href={article.url}>
-            <div className="ArticleCard-image">
-                {!props.preview ? null : (
-                    <picture>
-                        <img
-                            className={cx({ opa: false })}
-                            alt={props.preview.alt}
-                            src={props.preview.src}
-                            srcSet={props.preview.srcSet.map(({ url, density }) => `${url} ${density}x`).join(' ')}
-                        />
-                    </picture >
-                )}
-            </div>
+        <Link href={article.url}>
+            <a className="invisible">
+                <div className="ArticleCard-image">
+                    {!props.preview ? null : (
+                        <picture>
+                            <img
+                                className={cx({ opa: false })}
+                                alt={props.preview.alt}
+                                src={props.preview.src}
+                                srcSet={props.preview.srcSet.map(({ url, density }) => `${url} ${density}x`).join(' ')}
+                            />
+                        </picture >
+                    )}
+                </div>
 
-            <div className="ArticleCard-body">
-                {article.title}
+                <div className="ArticleCard-body">
+                    {article.title}
 
-                {!article.date ? null : (
-                    <Date>
-                        {article.date}
-                    </Date>
-                )}
-            </div>
-        </a>
+                    {!article.date ? null : (
+                        <Date>
+                            {article.date}
+                        </Date>
+                    )}
+                </div>
+            </a>
+        </Link>
     </section>
 )