added styles

Author: Laith Harb

src/App.css

@@ -36,3 +36,59 @@
     transform: rotate(360deg);
   }
 }
+
+
+
+.List {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  width: 50rem;
+  margin: 0rem auto;
+  border: 0.1rem solid rgba(0, 0, 0, 0.233);
+  padding: 1rem;
+  justify-content: space-between;
+}
+
+.List-header {
+  display: flex;
+  align-items: center;
+}
+
+.List-header h2 {
+  color: rgb(37, 36, 36)
+}
+
+.List-img {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 100%;
+  margin-right: 0.5rem;
+}
+
+.List-note {
+  width: 30%;
+  text-align: left;
+}
+
+.AddToList {
+  display: flex;
+  flex-direction: column;
+  width: 30rem;
+  margin: 5rem auto
+}
+
+.AddToList-input {
+  padding: 0.5rem;
+  font-size: 1rem;
+  margin: 0.3rem 0rem
+}
+
+.AddToList-btn {
+  padding: 0.5rem;
+  cursor: pointer;
+  background-color: #0b5468;
+  font-weight: 700;
+  color: white;
+  border: none
+}

src/App.tsx

@@ -8,6 +8,7 @@ export interface IState {
   people: {
       name: string
       age: number
+      img: string
       note?: string
   }[]
 }
@@ -19,11 +20,13 @@ function App() {
     {
       name: "LeBron James",
       age: 35,
-      note: "allegeric to staying on the same team",
+      img: "https://cdn.nba.com/headshots/nba/latest/1040x760/2544.png",
+      note: "Allegeric to staying on the same team",
     },
     {
       name: "Kobe Bryant",
-      age: 42
+      age: 42,
+      img: "https://fullpresscoverage.com/wp-content/uploads/2020/01/101524695-457220551.jpg"
     }
   ])
 

src/components/AddToList.tsx

@@ -11,10 +11,11 @@ const AddToList: React.FC<IProps> = ({setPeople, people}) => {
     const [input, setInput] = useState({
         name: "",
         age: "",
-        note: ""
+        note: "",
+        img: ""
     }) 
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         setInput({
             ...input,
             [e.target.name]: e.target.value
@@ -29,42 +30,55 @@ const AddToList: React.FC<IProps> = ({setPeople, people}) => {
             {
                 name: input.name,
                 age: parseInt(input.age),
+                img: input.img,
                 note: input.note
             }
         ]);
 
         setInput({
             name: "",
             age: "",
+            img: "",
             note: ""
         })
     }
 
     return (
-        <div style={{display: "flex", flexDirection: "column", width: "30rem", margin: "5rem auto"}}>
+        <div className="AddToList">
             <input 
                 type="text"
                 onChange={handleChange}
+                className="AddToList-input"
                 name="name"
                 value={input.name}
                 placeholder="Name"
             />
             <input 
                 type="text"
                 onChange={handleChange}
+                className="AddToList-input"
                 name="age"
                 value={input.age}
                 placeholder="Age"
             />
             <input 
                 type="text"
                 onChange={handleChange}
+                className="AddToList-input"
+                name="img"
+                value={input.img}
+                placeholder="Image Url"
+            />
+            <textarea
+                onChange={handleChange}
+                className="AddToList-input"
                 name="note"
                 value={input.note}
                 placeholder="Note"
             />
             <button
                 onClick={handleClick}
+                className="AddToList-btn"
             >
                 Add to List
             </button>

src/components/List.tsx

@@ -10,9 +10,13 @@ const List: React.FC<IProps> = ({ people }) => {
     const renderList = (): JSX.Element[] => {
         return people.map(person => {
             return (
-                <li style={{listStyle: "none", margin: "3rem"}}>
-                    <h3>{person.name}</h3>
-                    <p>{person.note}</p>
+                <li className="List">
+                    <div className="List-header">
+                        <img className="List-img" src={person.img}/>
+                        <h2>{person.name}</h2>
+                    </div>
+                    <p>{person.age} years old</p>
+                    <p className="List-note">{person.note}</p>
                 </li>
             )
         })