Practice

react-pr2/public/styles.css

@@ -50,9 +50,9 @@ body {
 }
 
 .circle-img {
-  border-radius: 25px;
+  border-radius: 100%;
   border: 7px solid #fff;
-  width: 250px;
+  width: 120px;
   height: 120px;
 }
 

react-pr2/src/components/App.jsx

@@ -1,14 +1,29 @@
 import React from "react";
 import Card from "./Card";
+import contacts from "../contacts";
 
-function App(props) {
+function App() {
   return (
     <div>
       <h1 className="heading">My Contacts</h1>
-      <Card name="Card.name" />
-      <img src="Card.imgURL" />
-      <Card phone="Card.phone" />
-      <Card email="Card.email" />
+      <Card
+        name={contacts[0].name}
+        img={contacts[0].imgURL}
+        phone={contacts[0].phone}
+        email={contacts[0].email}
+      />
+      <Card
+        name={contacts[1].name}
+        img={contacts[1].imgURL}
+        phone={contacts[1].phone}
+        email={contacts[1].email}
+      />
+      <Card
+        name={contacts[2].name}
+        img={contacts[2].imgURL}
+        phone={contacts[2].phone}
+        email={contacts[2].email}
+      />
     </div>
   );
 }

react-pr2/src/components/Card.jsx

@@ -1,20 +1,15 @@
 import React from "react";
-import contacts from "../contacts";
 
 function Card(props) {
   return (
     <div className="card">
       <div className="top">
-        <h2 className="name">{contacts.name}</h2>
-        <img
-          className="circle-img"
-          src="https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg"
-          alt="avatar_img"
-        />
+        <h2 className="name">{props.name}</h2>
+        <img className="circle-img" src={props.img} alt="avatar_img" />
       </div>
       <div className="bottom">
-        <p className="info">{contacts.phone}</p>
-        <p className="info">{contacts.email}</p>
+        <p className="info">{props.phone}</p>
+        <p className="info">{props.email}</p>
       </div>
     </div>
   );