import { Meta , Story } from '@storybook/react' ; import { Hamburger , SearchDark } from '../../icons' ; import { AppHeader } from './AppHeader' ; import { IRightMenu } from './Desktop/DesktopHeader' ; import { IMenuItem } from './Desktop/Menu' ; import React from 'react' ; export default { title : 'Components/Interface/Header/AppHeader' , component : AppHeader } as Meta ; interface IMenuAction { icon : ( ) => React . ReactNode ; handler : ( ) => void ; } interface IProps { menuItems : IMenuItem [ ] ; desktopRightMenu ? : IRightMenu [ ] ; id ? : string ; mobileLeft ? : IMenuAction ; title : string ; mobileBody ? : JSX . Element ; mobileRight ? : IMenuAction ; } const menuItems = [ { key : 'application' , title : 'Application' , selected : true , onClick : ( ) => alert ( 'application' ) } , { key : 'performance' , title : 'Performance' , selected : false , onClick : ( ) => alert ( 'performance' ) } ] ; const Template = ( args ) => < AppHeader { ... args } / > ; export const AppHeaderView = Template . bind ( { } ) ; AppHeaderView . args = { menuItems , id : 'register_app_header' , mobileLeft : { icon : ( ) => < Hamburger />, handler : ( ) => alert ( 'left menu clicked' ) } , title : 'Mobile header' , mobileRight : { icon : ( ) => < SearchDark />, handler : ( ) => alert ( 'right menu clicked' ) } } ;