71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import React, { Fragment } from 'react';
|
|
import { Link, NavLink } from 'react-router-dom';
|
|
|
|
import { BackIcon, EditIcon, ViewIcon }from '../components/icons';
|
|
|
|
|
|
const ContainerHeader: React.FunctionComponent<any> = (props) => (
|
|
<header className={`section-header view ${props.cat} background-${props.cat}`}>
|
|
<Link className="icon-button back" to="/view/categories.html">
|
|
<BackIcon />
|
|
</Link>
|
|
<h2 className="h2">{props.title}</h2>
|
|
<nav className="icon-buttons">
|
|
{
|
|
(!props.inactive)?
|
|
props.copy.copying?
|
|
<Fragment>
|
|
<NavLink
|
|
to={`/multi-edit/${props.cat}.html?data=${props.data_string}`}
|
|
className="icon-button copy">
|
|
Copy selected
|
|
</NavLink>
|
|
<a
|
|
className="icon-button copy"
|
|
onClick={props.copy.toggleCopying}>
|
|
Cancel
|
|
</a>
|
|
</Fragment>
|
|
:
|
|
<a
|
|
className="icon-button copy"
|
|
onClick={props.copy.toggleCopying}>
|
|
Copy
|
|
</a>
|
|
: null
|
|
}
|
|
{
|
|
props.help && !props.copy.copying?
|
|
<a
|
|
className="icon-button help"
|
|
title="Find out more"
|
|
href={props.help}>
|
|
Info
|
|
</a>
|
|
: null
|
|
}
|
|
{
|
|
!props.inactive && !props.copy.copying?
|
|
(props.mode === 'edit')?
|
|
<NavLink
|
|
className="icon-button view"
|
|
title="View data"
|
|
to={`/view/${props.cat}/building/${props.building.building_id}.html`}>
|
|
View
|
|
<ViewIcon />
|
|
</NavLink>
|
|
: <NavLink
|
|
className="icon-button edit"
|
|
title="Edit data"
|
|
to={`/edit/${props.cat}/building/${props.building.building_id}.html`}>
|
|
Edit
|
|
<EditIcon />
|
|
</NavLink>
|
|
: null
|
|
}
|
|
</nav>
|
|
</header>
|
|
)
|
|
|
|
export default ContainerHeader;
|