ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-12 13:36:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

extract header component

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-12 12:05:33 +02:00
parent ad918eddac
commit f4cca66180
3 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/Header.tsx Normal file
View file

@ -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;

6
src/pages/SignIn.tsx
View file

@ -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" />

8
src/pages/SignUp.tsx
View file

@ -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 />