78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
import React, { useState, useCallback } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Modal from 'react-modal';
|
|
import { Link } from 'gatsby';
|
|
import { Trans } from 'react-i18next';
|
|
|
|
import GitlabIcon from 'react-feather/dist/icons/gitlab';
|
|
|
|
import LocaleSwitcher from 'components/LocaleSwitcher';
|
|
import InstallPrompt from 'components/InstallPrompt';
|
|
import PrivacyPolicy from 'components/PrivacyPolicy';
|
|
|
|
import style from './style.module.css';
|
|
|
|
const Header = ({ banner }) => {
|
|
const [ showModal, updateShowModal] = useState(false);
|
|
const handleClose = useCallback(() => {
|
|
updateShowModal(false);
|
|
}, [updateShowModal]);
|
|
const handleOpen = useCallback(event => {
|
|
if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
updateShowModal(true);
|
|
}, [updateShowModal]);
|
|
|
|
return <>
|
|
<Modal
|
|
isOpen={ showModal }
|
|
onRequestClose={ handleClose }>
|
|
<PrivacyPolicy onClose={ handleClose } />
|
|
</Modal>
|
|
<header
|
|
className={ style.header }
|
|
data-banner={ banner || null }>
|
|
<h1>
|
|
<Link to="/">Regexper</Link>
|
|
</h1>
|
|
|
|
<ul className={ style.list }>
|
|
<li>
|
|
<a href="https://gitlab.com/javallone/regexper-static"
|
|
rel="external noopener noreferrer"
|
|
target="_blank">
|
|
<GitlabIcon />
|
|
<Trans>Source on GitLab</Trans>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<Link to="/privacy"
|
|
data-testid="privacy-link"
|
|
onClick={ handleOpen }
|
|
>
|
|
<Trans>Privacy Policy</Trans>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<InstallPrompt />
|
|
</li>
|
|
<li data-requires-js>
|
|
<LocaleSwitcher />
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
</>;
|
|
};
|
|
|
|
Header.propTypes = {
|
|
banner: PropTypes.oneOfType([
|
|
PropTypes.bool,
|
|
PropTypes.string
|
|
]).isRequired
|
|
};
|
|
|
|
export default Header;
|