PersonCardList -> CardList + refactoring

pages/collective.jsx

@@ -5,6 +5,7 @@ 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'
@@ -30,8 +31,9 @@ const Page = (props) => (
                 />
             )}
 
-            <div className="PersonCardList">
-                {props.persons.map((person, index) => (
+            <CardList
+                items={props.persons}
+                renderItem={(person, index) => (
                     <PersonCard
                         key={index}
                         profile={person}
@@ -39,8 +41,8 @@ const Page = (props) => (
                         url={person.url}
                         name={person.name}
                     />
-                ))}
-            </div>
+                )}
+            />
         </div>
     </App>
 )

src/components/CardList.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const CardList = props => (
+    <div className="CardList">
+        <style jsx>{`
+            .CardList {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+
+                justify-content: space-between;
+            }
+        `}</style>
+
+        {props.items.map(
+            (item, index) => props.renderItem(item, index)
+        )}
+    </div>
+)

src/style/components/PersonCardList.scss

@@ -1,7 +0,0 @@
-.PersonCardList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  justify-content: space-between;
-}

src/style/style.scss

@@ -22,7 +22,6 @@
 
 @import "components/ArticleCardList";
 @import "components/ArticleTags";
-@import "components/PersonCardList";
 
 @import "main";
 @import "body-wrapper";