import React from 'react' ; import * as Styled from './Avatar.styles' ; export interface Props extends React . ComponentPropsWithoutRef < 'div' > { src : string ; firstName : string ; lastName : string ; isActive : boolean ; hasBadge : boolean ; width : string ; } function param { string } src param { string } width param { string } firstName param { string } lastName param { boolean } isActive param { boolean } hasBadge param { rest } rest returns { JSX . Element } const Avatar = ( { src , firstName , lastName , isActive , hasBadge , width , ... rest } ) : JSX . Element => { const fullName = `${ firstName } ${ lastName }` ; const initials = `${ firstName [ 0 ] } ${ lastName [ 0 ] }` ; return ( < Styled . Container > < Styled . Wrapper isActive = { isActive } width = { width } > { hasBadge && < Styled . Badge />} { src ? ( < Styled . Image alt = { fullName } src = { src } { ... rest } />) : (<Styled.Span {...rest}>{initials}</Styled . Span > ) } < /Styled.Wrapper> < Styled . Name > { fullName } < /Styled.Name> < /Styled.Container>); } ; export default Avatar ;