finish the task

src/Button.js

@@ -0,0 +1,9 @@
+const Button = ({ label, onClick }) => {
+    return (
+        <button onClick={onClick}>
+            {label}
+        </button>
+    );
+};
+
+export default Button;

src/CustomerComponent.js

@@ -1,6 +1,7 @@
 import './App.css';
 import LabelInput from "./LabelInput";
 import H1 from "./H1";
+import Button from "./Button";
 
 
 
@@ -9,18 +10,19 @@ const CustomerComponent = ({customer}) => {
     const {firstName, lastName, email, phoneNumberList} = customer
     return (
         <div>
-            <H1 content={firstName + ' ' + lastName} color="#313131"/>
+            <H1 content={firstName + ' ' + lastName}/>
+            <H1 color="#313131" content="hello"/>
             <LabelInput label="First name" type="text" value={firstName}/>
             <LabelInput label="Lasst name" type="text" value={lastName}/>
             <LabelInput label="Email" type="text" value={email}/>
-
+            <Button label="Click me" onClick={() => { console.log('clicked') }} />
             <br/>
 
             {phoneNumberList.map((phoneNumber, index) => {
-                // first task: transform this list of <span> to <LabelInput>
                 return (
-                    <span key={index}>{phoneNumber}<br/></span>
-                )
+                    <LabelInput key={index} label={"Phone number" +(index + 1)} type="text" value={phoneNumber}
+                     />
+                );
             })}
         </div>
     )

src/H1.js

@@ -1,8 +1,8 @@
 // todo: Allow to set the color of the header with a property
 
-const H1 = ({content}) => {
+const H1 = ({content, color = "#c94040" }) => {
     return (
-        <h1>{content}</h1>
+        <h1 style={{ color }}>{content}</h1>
     )
 }