x.tsx

export function Logo({ src }: {
  src: string,
}) {
  return ifPresent(src, (
    <div className='web-activity-header-logo'>
      <img src={src} className='web-activity-header-img' />
    </div>
  ));
}



import React from 'react'

/**
 * Renders the given markup if the given value is truthy.
 * Else renders an empty fragment.
 * 
 * @param value value to check, typically a string that could be undefined or * "".
 * @param markup jsx markup to render if value is truthy.
 */
export function ifPresent(value: any, markup: JSX.Element) {
  return value ? markup : <></>
}