form-preview:#2 - added props and proptypes

src/components/header/Header.js

@@ -1,7 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import '../../pages/_app';
 
-const Header = () => {
+const Header = props => {
+  const { name, status } = props;
+
   return (
     <header className="header">
       <div className="header-container">
@@ -14,8 +18,8 @@ const Header = () => {
         <div className="header__right-content">
           <div className="profile">
             <div className="profile-detail">
-              <div className="profile__name">Ribby Frog</div>
-              <div className="profile__status">Employee</div>
+              <div className="profile__name">{name}</div>
+              <div className="profile__status">{status}</div>
             </div>
             <div className="dropdown">
               <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -32,4 +36,9 @@ const Header = () => {
   );
 };
 
+Header.propTypes = {
+  name: PropTypes.string,
+  status: PropTypes.string,
+};
+
 export default Header;

src/components/media/Media.js

@@ -1,6 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
+const Media = props => {
+  const { icon, label } = props;
 
-const Media = ({ icon, label }) => {
   return (
     <div className="media">
       <span className="media__icon">{icon}</span>
@@ -9,4 +12,9 @@ const Media = ({ icon, label }) => {
   );
 };
 
+Media.propTypes = {
+  icon: PropTypes.string,
+  label: PropTypes.string,
+};
+
 export default Media;

src/components/userdetail/UserDetail.js

@@ -1,9 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import Media from '../media/Media';
 import { FAVORITE_ICON } from '../icons/icon';
+
 import Button from '../button/Button';
 
-const UserDetail = () => {
+const UserDetail = props => {
+  const { name, experience, onPreviewBtnClicked } = props;
+
   return (
     <section className="user-detail">
       <div className="user-detail-container">
@@ -12,18 +17,24 @@ const UserDetail = () => {
             <img src="../../assets/Image.png" alt="Profile Picture" />
           </div>
           <div className="user-detail__emp-attribute">
-            <div className="user-detail__username">Ribby McFroggy</div>
+            <div className="user-detail__username">{name}</div>
             <div className="user-detail__activity">
-              <Media icon={FAVORITE_ICON} label="5 years professional experience" />
+              <Media icon={FAVORITE_ICON} label={experience} />
             </div>
           </div>
         </div>
         <div className="user-detail__right-content">
-          <Button content="Preview" />
+          <Button content="Preview" onclick={onPreviewBtnClicked} />
         </div>
       </div>
     </section>
   );
 };
 
+UserDetail.propTypes = {
+  name: PropTypes.string,
+  experience: PropTypes.string,
+  onPreviewBtnClicked: PropTypes.func,
+};
+
 export default UserDetail;

src/pages/_app.js

@@ -1,6 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import '../assets/sass/style.scss';
 
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }
+
+MyApp.propTypes = {
+  Component: PropTypes.any,
+  pageProps: PropTypes.any,
+};