export function DesignableBannerVisual()

in dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerVisual.tsx [21:58]

• 36 lines of code
• 6 McCabe index (conditional complexity)

export function DesignableBannerVisual({
	settings,
	bannerId,
	isHeaderImage,
}: DesignableBannerVisualProps): JSX.Element {
	const baseImage: ImageAttrs = {
		url: settings.mainUrl,
		media: '',
		alt: settings.altText,
	};

	const images: ImageAttrs[] = [];
	const styles = getStyles(isHeaderImage);
	if (settings.mobileUrl) {
		images.push({ url: settings.mobileUrl, media: '(max-width: 739px)' });
	}
	if (settings.tabletUrl) {
		images.push({ url: settings.tabletUrl, media: '(max-width: 979px)' });
	}
	if (settings.desktopUrl) {
		images.push({ url: settings.desktopUrl, media: '(max-width: 1139px)' });
	}
	if (settings.leftColUrl) {
		images.push({ url: settings.leftColUrl, media: '(max-width: 1299px)' });
	}
	if (settings.wideUrl) {
		images.push({ url: settings.wideUrl, media: '' });
	}

	return (
		<ResponsiveImage
			baseImage={baseImage}
			images={images}
			bannerId={bannerId}
			cssOverrides={styles.container}
		/>
	);
}