import { forwardRef } from 'react' ; import type { HTMLProps } from 'react' ; import { FiAlertCircle } from 'react-icons/fi' ; import type { IconType } from 'react-icons/lib' ; import type { Bound } from '../../../vis/models' ; import styles from './Thumb.module.css' ; interface Props extends HTMLProps < HTMLDivElement > { bound : Bound ; isAuto : boolean ; hasError : boolean ; AutoIcon : IconType ; } const Thumb = forwardRef < HTMLDivElement , Props > ( ( props , ref ) => { const { bound , isAuto , hasError , AutoIcon , ... thumbProps } = props ; return ( < div ref = { ref } { ... thumbProps } className = { styles . thumb } aria - label = { `Change ${ bound } limit` } data - auto = { isAuto } data - error = { hasError || undefined } > < div className = { styles . thumbBtnLike } > { isAuto && < AutoIcon className = { styles . icon } />} { ! isAuto && hasError && ( < FiAlertCircle className = { styles . icon } strokeWidth = "3" / > ) } < /div> < /div>); } ) ; export default Thumb ;