github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/headerSection/index.tsx (about) 1 // Copyright 2020 The Cockroach Authors. 2 // 3 // Use of this software is governed by the Business Source License 4 // included in the file licenses/BSL.txt. 5 // 6 // As of the Change Date specified in that file, in accordance with 7 // the Business Source License, use of this software will be governed 8 // by the Apache License, Version 2.0, included in the file 9 // licenses/APL.txt. 10 11 import React from "react"; 12 import { Link, RouteComponentProps, withRouter } from "react-router-dom"; 13 14 import { Text, TextTypes } from "src/components"; 15 import { trustIcon } from "src/util/trust"; 16 import ArrowLeftIcon from "!!raw-loader!assets/arrowLeft.svg"; 17 import "./headerSection.styl"; 18 19 export interface HeaderSectionProps { 20 title: string; 21 navigationBackConfig?: { 22 text: string; 23 path: string; 24 }; 25 } 26 27 // tslint:disable-next-line:variable-name 28 const HeaderSection: React.FC<HeaderSectionProps & RouteComponentProps> = (props) => { 29 const { navigationBackConfig, title } = props; 30 return ( 31 <div className="header-section"> 32 { 33 navigationBackConfig && ( 34 <div className="header-section__back-link"> 35 <span 36 className="header-section__back-icon" 37 dangerouslySetInnerHTML={ trustIcon(ArrowLeftIcon) } 38 /> 39 <Link to={navigationBackConfig.path}>{navigationBackConfig.text}</Link> 40 </div> 41 ) 42 } 43 <div className="header-section__title"> 44 <Text textType={TextTypes.Heading3}>{title}</Text> 45 </div> 46 </div> 47 ); 48 }; 49 50 export default withRouter(HeaderSection);