import { MdBusiness } from 'react-icons/md' ; import { Organization } from '../../../types' ; import ExternalLink from '../../common/ExternalLink' ; import Image from '../../common/Image' ; import styles from './Card.module.css' ; interface Props { organization : Organization ; } const OrgCard = ( props ) => { const renderLabel = ( ) : JSX . Element => { return ( < div data - testid = "org-using-pkg" className = { `badge badge-rounded bg-light text-dark rounded-pill d-flex flex-row align-items-center ps-0 pe-3 border ${ styles . badge }` } > < div className = "me-2" > < div className = { `rounded-circle border bg-white ${ styles . imageWrapper } imageWrapper overflow-hidden` } > < div className = "d-flex align-items-center justify-content-center w-100 h-100" > < Image alt = { props . organization . displayName || props . organization . name } imageId = { props . organization . logoImageId } className = { `m-auto ${ styles . image }` } placeholderIcon = { < MdBusiness / > } /> < /div> < /div> < /div> < div className = { `text-truncate text-dark fw-bold ${ styles . badgeContent }` } > < span > { props . organization . displayName || props . organization . name } < /span> < /div> < /div>); } ; return ( < > { props . organization . homeUrl ? ( < ExternalLink href = { props . organization . homeUrl } className = "d-inline-block text-dark h5 mb-2 me-3" label = "Open organization url" > { renderLabel ( ) } < /ExternalLink>) : (<div className="d-inline-block text-dark h5 mb-2 me-3">{renderLabel()}</div > ) } < />); } ; export default OrgCard ;