import React , { ComponentPropsWithoutRef , ReactNode } from 'react' ; import StepBase from './StepBase' ; type CustomClickEvent = { href : string ; number ? : ReactNode ; id : string ; title : string ; } ; const defaultClassName = 'past af-steps-list-step' ; type Props = ComponentPropsWithoutRef < typeof StepBase > & { href : string ; number ? : ReactNode ; onClick ? : ( e : CustomClickEvent ) => void ; } ; const StepLink = ( { id , href , number , title , className = defaultClassName , onClick , ... otherProps } ) => ( < StepBase id = { id } className = { `${ className } ${ number ? 'number' : '' }` } title = { title } { ... otherProps } > < a className = "af-steps-list-stepLabel" href = { href } onClick = { ( ) => onClick && onClick ( { href , id , title , number } ) } > { ! ! number && < div className = "af-steps-list-stepNumber" > { number } < /div>} < div className = "af-steps-list-stepTitle" > { title } < /div> < /a> < /StepBase>); export default StepLink ;