Make PeopleGrid component

src/components/people-grid/people-grid.css

@@ -0,0 +1,35 @@
+.avatar-grid {
+    display: flex;
+    margin: 0 auto;
+    padding: 64px 0;
+    max-width: 864px;
+    list-style: none;
+    flex-wrap: wrap;
+    flex-flow: row wrap;
+    justify-content: center;
+}
+
+.avatar-item {
+    display: inline-block;
+    margin: 0;
+    padding-bottom: 32px;
+    text-align: center;
+    line-height: 1.25rem;
+
+    img {
+        $img-border: rgba(0, 0, 0, .05);
+        border: 2px solid $img-border;
+        border-radius: 8px;
+        background-color: $ui-white;
+        width: 80px;
+        height: 80px;
+}
+
+.avatar-text {
+    display: inline-block;
+    width: 144px;
+    font-size: .875rem;
+    word-wrap: break-word;
+
+}
+}

src/components/people-grid/people-grid.jsx

@@ -0,0 +1,46 @@
+const classNames = require('classnames');
+const omit = require('lodash.omit');
+const PropTypes = require('prop-types');
+const React = require('react');
+const Avatar = require('../../components/avatar/avatar.jsx');
+
+const PeopleGrid = props => (
+    <ul className="avatar-grid">
+        {props.people.map((person, index) => (
+            <li
+                className="avatar-item"
+                key={`person-${index}`}
+            >
+                <div>
+                    {person.userName ? (
+                        <a href={`https://scratch.mit.edu/users/${person.userName}/`}>
+                            <Avatar
+                                alt=""
+                                src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
+                            />
+                        </a>
+                    ) : (
+                        /* if userName is not given, there's no chance userId is given */
+                        <Avatar
+                            alt=""
+                            src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
+                        />
+                    )}
+                </div>
+                <span className="avatar-text">
+                    {person.name}
+                </span>
+            </li>
+        ))}
+    </ul>
+);
+
+PeopleGrid.propTypes = {
+    people: PropTypes.arrayOf(PropTypes.shape({
+    	userName: PropTypes.string,
+    	userId: PropTypes.number,
+    	name: PropTypes.string
+    }))
+};
+
+module.exports = PeopleGrid;

src/views/credits/credits.jsx

@@ -2,9 +2,9 @@ const React = require('react');
 const render = require('../../lib/render.jsx');
 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
-const Avatar = require('../../components/avatar/avatar.jsx');
 const Page = require('../../components/page/www/page.jsx');
 const People = require('./people.json');
+const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
 const Supporters = require('./supporters.json');
 const TitleBanner = require('../../components/title-banner/title-banner.jsx');
 
@@ -25,34 +25,7 @@ const Credits = () => (
                         <FormattedMessage id="credits.developers" />
                     </p>
                 </div>
-                <ul className="avatar-grid">
-                    {People.map((person, index) => (
-                        <li
-                            className="avatar-item"
-                            key={`person-${index}`}
-                        >
-                            <div>
-                                {person.userName ? (
-                                    <a href={`https://scratch.mit.edu/users/${person.userName}/`}>
-                                        <Avatar
-                                            alt=""
-                                            src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
-                                        />
-                                    </a>
-                                ) : (
-                                    /* if userName is not given, there's no chance userId is given */
-                                    <Avatar
-                                        alt=""
-                                        src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
-                                    />
-                                )}
-                            </div>
-                            <span className="avatar-text">
-                                {person.name}
-                            </span>
-                        </li>
-                    ))}
-                </ul>
+                <PeopleGrid people={People} />
             </div>
             <div
                 className="supporters"