extract DevSummary type

src/components/DevProfile.tsx

@@ -1,21 +1,18 @@
 import React, {FC} from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
+import DevSummary from '../models/DevSummary';
 
-interface IProps {
+const DevProfile: FC<DevSummary> = ({
-  name: string;
+  id,
-  description: string;
+  name,
-  location: string;
+  picture,
-  skills: string[];
+  description,
-}
+  location,
-
+  skills,
-const DevProfile: FC<IProps> = ({name, description, location, skills}) => (
+}) => (
   <div className="profile bg-light">
-    <img
+    <img src={picture} alt={name} className="round-img" />
-      src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
-      alt="Some guy"
-      className="round-img"
-    />
     <div>
       <h2>{name}</h2>
       <p>{description}</p>

src/models/DevSummary.ts

@@ -0,0 +1,10 @@
+interface DevSummary {
+  id: string;
+  name: string;
+  picture: string;
+  description: string;
+  location: string;
+  skills: string[];
+}
+
+export default DevSummary;

src/pages/Developers.tsx

@@ -1,20 +1,33 @@
 import React, {FC} from 'react';
 import Header from '../components/Header';
 import DevProfile from '../components/DevProfile';
+import DevSummary from '../models/DevSummary';
 
 // interface IProps {
-//     developers: []
+//     developers: DevSummary[]
 // }
 
 // const Developers: FC<IProps> = ({developers}) => (
 const Developers: FC = () => {
-  const developers = [
+  const developers: DevSummary[] = [
     {
+      id: '0',
       name: 'John Doe',
+      picture:
+        'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
       description: 'Developer at Microsoft',
       location: 'Seattle, WA',
       skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
     },
+    {
+      id: '42',
+      name: 'Ruidy Nemausat',
+      picture:
+        'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
+      description: 'Frontend Engineer at DESY',
+      location: 'Hamburg, DE',
+      skills: ['React', 'TypeScript', 'Redux', 'GraphQL'],
+    },
   ];
 
   return (
@@ -25,14 +38,9 @@ const Developers: FC = () => {
         icon="connectdevelop"
       />
       <div className="profiles">
-        {developers.map((dev, i) => (
+        {developers.map(dev => (
-          <DevProfile
+          // use spread operator to pass props
-            key={i}
+          <DevProfile key={dev.id} {...dev} />
-            name={dev.name}
-            description={dev.description}
-            location={dev.location}
-            skills={dev.skills}
-          />
         ))}
       </div>
     </section>