From cc32215fddb6114662c4fb09c3e4308d4ea8001f Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 15 Oct 2019 02:51:15 +0300
Subject: [PATCH] ArticleCard component style fix + ts

---
 .../{ArticleCard.jsx => ArticleCard/index.tsx}     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)
 rename src/components/{ArticleCard.jsx => ArticleCard/index.tsx} (92%)

diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard/index.tsx
similarity index 92%
rename from src/components/ArticleCard.jsx
rename to src/components/ArticleCard/index.tsx
index b9c27e0e..1d364e38 100644
--- a/src/components/ArticleCard.jsx
+++ b/src/components/ArticleCard/index.tsx
@@ -1,13 +1,17 @@
 import React from 'react'
 import cx from 'classnames'
-import { dateFormat } from '../lib/date'
+import { dateFormat } from '../../lib/date'
 
 const Date = ({ children }) => (
     <p className="date">{dateFormat(children)}</p>
 )
 
-export const ArticleCard = ({ article }) => (
-    <article className="ArticleCard">
+export interface IArticleCardProps {
+    article: any
+}
+
+export const ArticleCard: React.FC<IArticleCardProps> = ({ article }) => (
+    <section className="ArticleCard">
         <style jsx>{`
             .ArticleCard {
                 --article-card-width: 30%;
@@ -91,7 +95,7 @@ export const ArticleCard = ({ article }) => (
 
             // Mobile
 
-            @media (max-width: var(--mobile-width)) {
+            @media (max-width: 31.25em) {
                 .ArticleCard {
                     --article-card-width: 100%;
                     --article-card-margin: var(--single-margin) 0;
@@ -121,5 +125,5 @@ export const ArticleCard = ({ article }) => (
                 )}
             </div>
         </a>
-    </article>
+    </section>
 )