export default function ThemedImage()

in src/theme/ThemedImage/index.tsx [16:49]

29 lines of code
3 McCabe index (conditional complexity)


export default function ThemedImage(props: Props): JSX.Element {
  const isBrowser = useIsBrowser();
  const {colorMode} = useColorMode();
  const {sources, className, alt, ...propsRest} = props;

  type SourceName = keyof Props['sources'];

  const clientThemes: SourceName[] =
    colorMode === 'dark' ? ['dark'] : ['light'];

  const renderedSourceNames: SourceName[] = isBrowser
    ? clientThemes
    : // We need to render both images on the server to avoid flash
      // See https://github.com/facebook/docusaurus/pull/3730
      ['light', 'dark'];

  return (
    <>
      {renderedSourceNames.map((sourceName) => (
        <img
          key={sourceName}
          src={sources[sourceName]}
          alt={alt}
          className={clsx(
            styles.themedImage,
            styles[`themedImage--${sourceName}`],
            className,
          )}
          {...propsRest}
        />
      ))}
    </>
  );
}