Display contact avatar, name, email, and remove button

udacity · Mar 2, 2018 · 7e77074 · 7e77074 · mohmedEldeeb · Aug 5, 2021
1 parent 59e929c
commit 7e77074
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/ListContacts.js b/src/ListContacts.js
@@ -5,8 +5,20 @@ class ListContacts extends Component {
     return (
       <ol className='contact-list'>
         {this.props.contacts.map((contact) => (
-          <li key={contact.id}>
-            {contact.name}
+          <li key={contact.id} className='contact-list-item'>
+            <div
+              className='contact-avatar'
+              style={{
+                backgroundImage: `url(${contact.avatarURL})`
+              }}
+            ></div>
+            <div className='contact-details'>
+              <p>{contact.name}</p>
+              <p>{contact.handle}</p>
+            </div>
+            <button className='contact-remove'>
+              Remove
+            </button>
           </li>
         ))}
       </ol>