import React , { PropsWithChildren } from 'react' ; import { EuiPage , EuiPageSideBar , EuiSideNav } from '@elastic/eui' ; import { IBasePath } from 'kibana/public' ; import { PLUGIN_ID } from '../../common' ; export interface ExampleLink { title : string ; path : string ; } interface NavProps { exampleLinks : ExampleLink [ ] ; basePath : IBasePath ; } const SideNav = ( { exampleLinks , basePath } ) => { const navItems = exampleLinks . map ( ( example ) => ( { id : example . path , name : example . title , 'data-test-subj' : example . path , href : example . path . startsWith ( 'http' ) ? example . path : basePath . prepend ( `/app/${ PLUGIN_ID }${ example . path }` ) , } ) ) ; return ( < EuiSideNav items = { [ { name : 'Search Examples' , id : 'home' , items : [ ... navItems ] , } , ] } / > ) ; } ; interface Props { exampleLinks : ExampleLink [ ] ; basePath : IBasePath ; } export const SearchExamplePage = ( { children , exampleLinks , basePath , } ) => { return ( < EuiPage > < EuiPageSideBar > < SideNav exampleLinks = { exampleLinks } basePath = { basePath } / > < /EuiPageSideBar> { children } < /EuiPage>); } ;