From f4cca661806779cdae45e6ea9fca846e2493bf18 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Tue, 12 May 2020 12:05:33 +0200
Subject: [PATCH] extract header component

---
 src/components/Header.tsx | 28 ++++++++++++++++++++++++++++
 src/pages/SignIn.tsx      |  6 ++----
 src/pages/SignUp.tsx      |  8 ++------
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Header.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..7064190
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,28 @@
+import React, {FC} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faUser} from '@fortawesome/free-solid-svg-icons';
+
+interface IProps {
+  title: string;
+  lead: string;
+  icon?: string;
+}
+
+const Header: FC<IProps> = ({title, lead, icon = 'faUser'}) => {
+  const RenderIcon = (icon: string) => {
+    if (icon === 'faUser') {
+      return <FontAwesomeIcon icon={faUser} />;
+    }
+  };
+
+  return (
+    <>
+      <h1 className="large text-primary">{title}</h1>
+      <p className="lead">
+        {RenderIcon(icon)} {lead}
+      </p>
+    </>
+  );
+};
+
+export default Header;
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index 5a64452..872628f 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -1,12 +1,10 @@
 import React, {FC} from 'react';
+import Header from '../components/Header';
 
 const SignUp: FC = () => (
   <section className="container">
     <div className="alert alert-danger">Invalid credentials</div>
-    <h1 className="large text-primary">Sign In</h1>
-    <p className="lead">
-      <i className="fa fa-user"></i> Sign into your account
-    </p>
+    <Header title="Sign In" lead="Sign into your account" />
     <form action="dashboard.html" className="form">
       <div className="form-group">
         <input type="email" placeholder="Email Address" />
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 8d80d67..4aec5cf 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,13 +1,9 @@
 import React, {FC} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faUser} from '@fortawesome/free-solid-svg-icons';
+import Header from '../components/Header';
 
 const SignUp: FC = () => (
   <section className="container">
-    <h1 className="large text-primary">Sign Up</h1>
-    <p className="lead">
-      <FontAwesomeIcon icon={faUser} /> Create your account
-    </p>
+    <Header title="Sign Up" lead="Create your account" />
     <form action="dashboard.html" className="form">
       <div className="form-group">
         <input type="text" placeholder="Name" required />