Practice

react-pr2/src/components/App.jsx

@@ -1,19 +1,14 @@
 import React from "react";
-import Contacts from "contacts";
+import Card from "./Card";
+
 function App(props) {
   return (
     <div>
       <h1 className="heading">My Contacts</h1>
-      <div className="card">
-        <div className="top">
-          <h2 className="name">{Contacts.name}</h2>
-          <img className="circle-img" src={Contacts.imgURL} alt="avatar_img" />
-        </div>
-        <div className="bottom">
-          <p className="info">{Contacts.phone}</p>
-          <p className="info">{Contacts.email}</p>
-        </div>
-      </div>
+      <Card name="Card.name" />
+      <img src="Card.imgURL" />
+      <Card phone="Card.phone" />
+      <Card email="Card.email" />
     </div>
   );
 }

react-pr2/src/components/Card.jsx

@@ -0,0 +1,23 @@
+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"
+        />
+      </div>
+      <div className="bottom">
+        <p className="info">{contacts.phone}</p>
+        <p className="info">{contacts.email}</p>
+      </div>
+    </div>
+  );
+}
+
+export default Card;

react-pr2/src/contacts.js

@@ -22,4 +22,4 @@ const contacts = [
   },
 ];
 
-export default Contacts;
+export default contacts;