Differential D7835 Diff 29719 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 } 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 * 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';

	const iconProps = {			const iconProps = {
	size: 'sm',			size: 'sm',
	color: '#ebedee',			color: '#ebedee',
	};			};

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

	function Header(): React.Node {			function Header(): React.Node {
	return (			return (
	<nav className={css.wrapper}>			<nav className={css.headerContainer}>
				<div className={css.headerNavContentContainer}>
	<NavLink to="/" className={css.logo}>			<NavLink to="/" className={css.logo}>
	<h1>Comm</h1>			<h1>Comm</h1>
	</NavLink>			</NavLink>
	<div className={css.page_nav}>			<div className={css.pageNav}>
	<NavLink to="/" exact {...navLinkProps}>			<NavLink to="/" exact {...navLinkProps}>
	App			App
	</NavLink>			</NavLink>
	<NavLink to="/keyservers" exact {...navLinkProps}>			<NavLink to="/keyservers" exact {...navLinkProps}>
	Keyserver			Keyserver
	</NavLink>			</NavLink>
	</div>			</div>
	<div className={css.social_icons_container}>			<div className={css.socialIconsContainer}>
	<a href="https://web.comm.app">			<a href="https://web.comm.app">
	<div className={css.webapp_icon}>			<div className={css.webappIcon}>
	<FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />			<FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />
	</div>			</div>
	</a>			</a>
	<a href="https://twitter.com/commdotapp">			<a href="https://twitter.com/commdotapp">
	<div className={css.twitter_icon}>			<div className={css.twitterIcon}>
	<FontAwesomeIcon icon={faTwitter} {...iconProps} />			<FontAwesomeIcon icon={faTwitter} {...iconProps} />
	</div>			</div>
	</a>			</a>
	<a href="https://github.com/CommE2E/comm">			<a href="https://github.com/CommE2E/comm">
	<div className={css.github_icon}>			<div className={css.githubIcon}>
	<FontAwesomeIcon icon={faGithub} {...iconProps} />			<FontAwesomeIcon icon={faGithub} {...iconProps} />
	</div>			</div>
	</a>			</a>
				<div className={css.menuIcon}>
				<FontAwesomeIcon icon={faBars} {...iconProps} />
				</div>
				</div>
	</div>			</div>
	</nav>			</nav>
	);			);
	}			}

	export default Header;			export default Header;