import { ChangeEvent , useCallback } from 'react' ; import { TsQuery as TsQueryType } from '../../types' ; import { TS_QUERY } from '../../utils/data' ; import CheckBox from '../common/Checkbox' ; import SmallTitle from '../common/SmallTitle' ; import styles from './TsQuery.module.css' ; interface Props { active : string [ ] ; onChange : ( value : string , checked : boolean ) => void ; device : string ; } const TsQuery = ( props ) => { const isChecked = useCallback ( ( option ) => { return props . active . includes ( option ) ; } , [ props . active ] ) ; const onTsQueryChange = ( e ) : void => { const { value , checked } = e . target ; props . onChange ( value , checked ) ; } ; return ( < div role = "menuitem" className = "mt-2 mt-sm-3 pt-1" > < SmallTitle text = "Category" className = "text-dark fw-bold" / > < div className = "mt-3" > { TS_QUERY . map ( ( option ) => ( < CheckBox key = { `ts_${ option . label }` } name = "tsQuery" value = { option . label } device = { props . device } labelClassName = "mw-100" className = { styles . checkbox } label = { option . name } checked = { isChecked ( option . label ) } onChange = { onTsQueryChange } / > ) ) } < /div> < /div>); } ; export default TsQuery ;