import * as React from 'react' ; import styled from 'styled-components' ; import { TertiaryButton , CircleButton } from '../buttons' ; import { ApplicationIcon , Cross , VerticalThreeDots } from '../icons' ; import { ToggleMenu } from '.' ; const TopBar = styled . div `
  padding: 0 ${ ( { theme } ) => theme . grid . margin }px;
  height: 64px;
  background: ${ ( { theme } ) => theme . colors . white };
  ${ ( { theme } ) => theme . shadows . mistyShadow };
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  width: 100%;
  position: fixed;
  z-index: 1;
` ; const TopBarTitle = styled . h4 `
  ${ ( { theme } ) => theme . fonts . bigBodyBoldStyle };
  padding-left: 16px;
  color: ${ ( { theme } ) => theme . colors . copy };
` ; const Item = styled . span `
  display: flex;
  align-items: center;
` ; export interface IEventTopBarProps { id ? : string ; title : string ; pageIcon ? : JSX . Element ; goHome ? : ( ) => void ; saveAction ? : IEventTopBarMenuAction ; exitAction ? : IEventTopBarMenuAction ; menuItems ? : IToggleMenuItem [ ] ; iconColor ? : string ; } export interface IEventTopBarMenuAction { handler : ( ) => void ; label : string ; } interface IToggleMenuItem { label : string ; icon ? : JSX . Element ; handler : ( ) => void ; } export const EventTopBar = ( props ) => { const { goHome , title , saveAction , exitAction , menuItems , iconColor , pageIcon } = props ; return ( < TopBar > < Item > { pageIcon || < ApplicationIcon color = { iconColor } / > } { ' ' } < TopBarTitle > { title } < /TopBarTitle> < /Item> < Item > { goHome && ( < CircleButton id = "crcl-btn" onClick = { goHome } > < Cross color = "currentColor" / > < /CircleButton>)} { saveAction && ( < TertiaryButton onClick = { saveAction . handler } id = "save_draft" > { saveAction . label } < /TertiaryButton>)} { exitAction && ( < TertiaryButton onClick = { exitAction . handler } id = "exit_top_bar" > { exitAction . label } < /TertiaryButton>)} { menuItems && ( < ToggleMenu id = "eventToggleMenu" toggleButton = { < VerticalThreeDots / > } menuItems = { menuItems } / > ) } < /Item> < /TopBar>); } ;