Differential D7839 Diff 29721 landing/header.react.js

Changeset View

Standalone View

landing/header.react.js

	// @flow			// @flow

	import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';			import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
	import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons';			import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons';
	import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';			import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
				import classNames from 'classnames';
	import * as React from 'react';			import * as React from 'react';
	import { NavLink } from 'react-router-dom';			import { NavLink } from 'react-router-dom';

	import css from './header.css';			import css from './header.css';
				import typography from './typography.css';
	const iconProps = {
	size: 'sm',
	color: '#ebedee',
	};

	const navLinkProps = {
	className: css.tab,
	activeStyle: {
	color: 'white',
	},
	};

	function Header(): React.Node {			function Header(): React.Node {
				const logoTextClassName = classNames([typography.heading2, css.logoText]);
				const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);
				const navLinkClassName = classNames([typography.subheading2, css.tab]);

	return (			return (
	<nav className={css.headerContainer}>			<nav className={css.headerContainer}>
	<div className={css.headerNavContentContainer}>			<div className={css.headerNavContentContainer}>
	<NavLink to="/" className={css.logo}>			<div className={css.logo}>
	<h1>Comm</h1>			<NavLink to="/">
				<h1 className={logoTextClassName}>Comm</h1>
	</NavLink>			</NavLink>
				<div className={badgeClassName}>Beta</div>
				</div>
	<div className={css.pageNav}>			<div className={css.pageNav}>
	<NavLink to="/" exact {...navLinkProps}>			<NavLink
	App			to="/keyservers"
	</NavLink>			exact
	<NavLink to="/keyservers" exact {...navLinkProps}>			className={navLinkClassName}
				activeClassName={css.activeTab}
				>
	Keyserver			Keyserver
	</NavLink>			</NavLink>
				<NavLink
				to="/team"
				exact
				className={navLinkClassName}
				activeClassName={css.activeTab}
				>
				Team
				</NavLink>
				<NavLink
				to="/investors"
				exact
				className={navLinkClassName}
				activeClassName={css.activeTab}
				>
				Investors
				</NavLink>
	</div>			</div>
	<div className={css.socialIconsContainer}>			<div className={css.socialIconsContainer}>
	<a href="https://web.comm.app">			<a href="https://web.comm.app">
	<div className={css.webappIcon}>			<div className={css.webappIcon}>
	<FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />			<FontAwesomeIcon
				icon={faExternalLinkAlt}
				className={css.icon}
				size="sm"
				/>
	</div>			</div>
	</a>			</a>
	<a href="https://twitter.com/commdotapp">			<a href="https://twitter.com/commdotapp">
	<div className={css.twitterIcon}>			<div className={css.twitterIcon}>
	<FontAwesomeIcon icon={faTwitter} {...iconProps} />			<FontAwesomeIcon
				icon={faTwitter}
				className={css.icon}
				size="sm"
				/>
	</div>			</div>
	</a>			</a>
	<a href="https://github.com/CommE2E/comm">			<a href="https://github.com/CommE2E/comm">
	<div className={css.githubIcon}>			<div className={css.githubIcon}>
	<FontAwesomeIcon icon={faGithub} {...iconProps} />			<FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />
	</div>			</div>
	</a>			</a>
	<div className={css.menuIcon}>			<div className={css.menuIcon}>
	<FontAwesomeIcon icon={faBars} {...iconProps} />			<FontAwesomeIcon icon={faBars} className={css.icon} size="sm" />
	</div>			</div>
	</div>			</div>
	</div>			</div>
	</nav>			</nav>
	);			);
	}			}

	export default Header;			export default Header;