From c317d6631f1e1378efe6a1cdb82f7997ec59cbbb Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Thu, 20 Feb 2020 17:15:50 +0300
Subject: [PATCH] collective page uses card grid

---
 pages/collective.tsx                          | 27 ++++++++++---------
 .../{PersonCard.jsx => PersonCard/index.tsx}  |  6 +----
 2 files changed, 16 insertions(+), 17 deletions(-)
 rename src/components/{PersonCard.jsx => PersonCard/index.tsx} (94%)

diff --git a/pages/collective.tsx b/pages/collective.tsx
index ecfa2e74..ffd11d50 100644
--- a/pages/collective.tsx
+++ b/pages/collective.tsx
@@ -4,16 +4,18 @@ import { App } from 'src/components/App'
 import { Meta } from 'src/components/Meta'
 import { CollectiveImage } from 'src/components/CollectiveImage'
 import { PersonCard } from 'src/components/PersonCard'
-import { CardList } from 'src/components/CardList'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
 import { meta } from 'src/lib/meta'
-import { IMeta } from 'src/types'
+import { IMeta, IImage } from 'src/types'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage, NextPageContext } from 'next'
+import { CardGrid } from 'src/components/CardGrid'
 
 interface IPerson {
-
+    url: string
+    name: string
+    picture: IImage
 }
 
 type Props = {
@@ -51,18 +53,19 @@ const Page: NextPage<Props> = props => {
                 />
             )}
 
-            <CardList
-                items={props.data}
-                renderItem={(person, index) => (
+            <CardGrid style={{
+                marginBottom: 'var(--size-xl)',
+            }}>
+                {props.data.map((item, index) => (
                     <PersonCard
                         key={index}
-                        profile={person}
-                        picture={person.picture}
-                        url={person.url}
-                        name={person.name}
+                        profile={item}
+                        picture={item.picture}
+                        url={item.url}
+                        name={item.name}
                     />
-                )}
-            />
+                ))}
+            </CardGrid>
         </App>
     )
 }
diff --git a/src/components/PersonCard.jsx b/src/components/PersonCard/index.tsx
similarity index 94%
rename from src/components/PersonCard.jsx
rename to src/components/PersonCard/index.tsx
index 02d113cd..8c4518f6 100644
--- a/src/components/PersonCard.jsx
+++ b/src/components/PersonCard/index.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
-import { Image } from './Image'
+import { Image } from '../Image'
 
 export const PersonCard = ({ picture, name, url, profile }) => (
     <div className="PersonCard">
@@ -12,9 +11,6 @@ export const PersonCard = ({ picture, name, url, profile }) => (
                 display: flex;
                 flex-direction: column;
 
-                margin-bottom: var(--double-margin);
-
-                width: var(--person-card-width);
                 min-width: 10em;
                 max-width: 30em;
             }