import React , { FC } from 'react' ; import { Box , Paper , ButtonGroup , Button } from '@material-ui/core' ; import { StateFilterComponentProps } from '../../../../types' ; export const StateFilterComponent = ( { insightsStatusFilter , value , setInsightsStatusFilter , setFilteredTableData , } ) => ( < Paper > < Box position = "absolute" right = { 350 } top = { 20 } > < ButtonGroup color = "primary" aria - label = "text primary button group" > < Button color = { insightsStatusFilter === 'open' ? 'primary' : 'default' } onClick = { ( ) => { setInsightsStatusFilter ( insightsStatusFilter === 'open' ? null : 'open' ) ; if ( value ) { setFilteredTableData ( value . filter ( ( entry ) => entry . state === 'open' ) ) ; } } } > OPEN < /Button> < Button color = { insightsStatusFilter === 'fixed' ? 'primary' : 'default' } onClick = { ( ) => { setInsightsStatusFilter ( insightsStatusFilter === 'fixed' ? null : 'fixed' ) ; if ( value ) { setFilteredTableData ( value . filter ( ( entry ) => entry . state === 'fixed' ) ) ; } } } > FIXED < /Button> < Button color = { insightsStatusFilter === 'dismissed' ? 'primary' : 'default' } onClick = { ( ) => { setInsightsStatusFilter ( insightsStatusFilter === 'dismissed' ? null : 'dismissed' ) ; if ( value ) { setFilteredTableData ( value . filter ( ( entry ) => entry . state === 'dismissed' ) ) ; } } } > DISMISSED < /Button> < /ButtonGroup> < /Box> < /Paper>);