import { compact } from 'lodash' ; import uniq from 'lodash/uniq' ; import { useCallback , useEffect , useState } from 'react' ; import SmallTitle from '../common/SmallTitle' ; import styles from './Platforms.module.css' ; interface Props { title : string ; platforms ? : string [ ] | null ; } const Platforms = ( props ) => { const cleanPlatforms = useCallback ( ( ) : string [ ] => { let platforms = [ ] ; if ( props . platforms ) { platforms = uniq ( compact ( props . platforms ) ) ; } return platforms ; } , [ props . platforms ] ) ; const [ platforms , setPlatforms ] = useState < string [ ] > ( cleanPlatforms ( ) ) ; useEffect ( ( ) => { setPlatforms ( cleanPlatforms ( ) ) ; } , [ cleanPlatforms , props . platforms ] ) ; if ( platforms . length === 0 ) return null ; return ( < > < SmallTitle text = { props . title } / > < div className = "mb-3 d-flex flex-row flex-wrap" > { platforms . map ( ( platform ) => ( < div data - testid = "platformBadge" className = { `d-inline badge fw-normal me-2 mb-1 mw-100 text-truncate ${ styles . badge }` } key = { platform } > { platform } < /div>))} < /div> < />); } ; export default Platforms ;