import { CodeSnippet , KnobComponents } from '@fluentui/docs-components' ; import { Button , Checkbox , Label , Segment , Text } from '@fluentui/react' ; import * as React from 'react' ; const knobComponents = { KnobBoolean : props => ( < Checkbox checked = { props . value } title = "Toggle" onChange = { ( e , data ) => { props . setValue ( data . checked ) ; } } />), LogInspector : props => ( < Segment styles = { { padding : 0 } } > < div style = { { display : 'flex' , padding : 5 } } > < div style = { { flexGrow : 1 } } > < Text weight = "semibold" > Event log < /Text> < Label circular color = "brand" styles = { { marginLeft : '5px' } } > { props . items . length } < /Label> < /div> < Button onClick = { props . clearLog } size = "small" > Clear < /Button> < /div> { props . items . length > 0 && ( < CodeSnippet fitted formattable = { false } label = { false } value = { props . items . join ( '\n' ) } / > ) } < /Segment>), } ; export default knobComponents ;