article grid updated

src/components/ArticleGrid/Date.tsx

@@ -1,14 +1,17 @@
-import * as React from 'react'
-import { dateFormat } from '../../lib/date'
+import { dateFormat } from 'src/lib/date'
 
-export const Date: React.FC<{ children: string }> = ({ children }) => (
-    <p>
+export type DateProps = {
+    style?: React.CSSProperties
+    children: string | Date
+}
+export const Date: React.FC<DateProps> = props => (
+    <p style={props.style}>
         <style jsx>{`
             p {
-                color: #ccc;
-                font-size: small;
+                color: var(--color-text-second);
+                font-size: var(--font-size-second);
             }
         `}</style>
-        {dateFormat(children)}
+        {dateFormat(props.children)}
     </p>
 )

src/components/ArticleGrid/index.tsx

@@ -1,16 +1,18 @@
+import { IArticle } from 'src/types'
 import { Pager } from '../Pager'
 import { CardGrid } from '../CardGrid'
-import { IArticle } from 'src/types'
 import { Card, CardLayout } from '../Card'
 import { Date } from './Date'
+import { Block } from '../Block'
+import { Spacer } from '../Spacer'
 
-export interface IArticleGridProps {
+export type ArticleGridProps = {
     articles: IArticle[]
     nextPage: number | null
     prevPage: number | null
 }
 
-export const ArticleGrid: React.FC<IArticleGridProps> = ({ articles, nextPage, prevPage, ...props }) => (
+export const ArticleGrid: React.FC<ArticleGridProps> = ({ articles, nextPage, prevPage, ...props }) => (
     <>
         <CardGrid
             style={{
@@ -22,6 +24,26 @@ export const ArticleGrid: React.FC<IArticleGridProps> = ({ articles, nextPage, p
                 const layout: CardLayout = article.featured ? 'featured' : 'simple'
                 const srcSet = article.preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ')
 
+                const content = article.featured
+                    ? (
+                        <h2 style={{
+                            margin: 0,
+                            fontSize: '18pt'
+                        }}>
+                            {article.title}
+                        </h2>
+                    ) : (
+                        <Block
+                            direction={'vertical'}
+                        >
+                            {article.title}
+                            <Spacer />
+                            <Date style={{
+                                marginTop: 'var(--size-m)',
+                            }}>{article.date}</Date>
+                        </Block>
+                    )
+
                 return (
                     <Card
                         key={i}
@@ -36,19 +58,7 @@ export const ArticleGrid: React.FC<IArticleGridProps> = ({ articles, nextPage, p
                             gridColumn,
                         }}
                     >
-                        <div style={{
-                            minHeight: '5em',
-                        }}>
-                            <h2 style={{
-                                // margin: '0 0 var(--size-s)',
-                                margin: 0,
-                                fontSize: '18pt'
-                            }}>
-                                {article.title}
-                            </h2>
-
-                            {/* <Date>{article.date}</Date> */}
-                        </div>
+                        {content}
                     </Card>
                 )
             })}