mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-06 02:36:39 +00:00
cdba48cc72
* specify layout * create components folder and Navbar * create pages folder and Landing page component * create Sign Up page component * set basic routing - install react-router-dom - create Router folder and component * add constant routes file * verify all routes are accessible * add signin page * extract header component * add developers page * extract dev profiles * extract DevSummary type * update tests * add types * lay profile top and about out * lay experience section out - install moment - define Experience interface - define TimePeriod type & method * lay education section out - define education interface * lay repos section out * add Dashboard page and test * lay dashboard top section out * [refactor] Experience.ts: change employer to company; move TimePeriod to its own file * experience credential table in dashboard * education credential table in dashboard * dashboard done * edit profile * add experience page * add education page * create Comment and Post types; PostPage * postpage * posts page * refactor
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React, {FC} from 'react';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {
|
|
faUser,
|
|
faCodeBranch,
|
|
faGraduationCap,
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
import {faConnectdevelop} from '@fortawesome/free-brands-svg-icons';
|
|
|
|
interface IProps {
|
|
title: string;
|
|
lead: string;
|
|
icon?: string;
|
|
}
|
|
|
|
/**
|
|
* Header component
|
|
* @param title of the page
|
|
* @param lead description of the content
|
|
* @param icon to display (optional and default to faUser)
|
|
*/
|
|
const Header: FC<IProps> = ({title, lead, icon = 'faUser'}) => {
|
|
const RenderIcon = (icon: string) => {
|
|
if (icon === 'faUser') {
|
|
return <FontAwesomeIcon icon={faUser} />;
|
|
}
|
|
if (icon === 'connectdevelop') {
|
|
return <FontAwesomeIcon icon={faConnectdevelop} />;
|
|
}
|
|
if (icon === 'code-branch') {
|
|
return <FontAwesomeIcon icon={faCodeBranch} />;
|
|
}
|
|
if (icon === 'graduation-cap') {
|
|
return <FontAwesomeIcon icon={faGraduationCap} />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h1 className="large text-primary">{title}</h1>
|
|
<p className="lead">
|
|
{RenderIcon(icon)} {lead}
|
|
</p>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|