adilallo
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { getAssetPath } from "../../../../lib/assetUtils";
|
|
import type { BlogPost } from "../../../../lib/content";
|
|
import ContentBannerView from "./ContentBanner.view";
|
|
import type { ContentBannerProps } from "./ContentBanner.types";
|
|
|
|
/** Figma: Section / ContentBanner — article (blog) and guide (content page template 22078:791901). */
|
|
const ContentBannerContainer = memo<ContentBannerProps>(
|
|
({
|
|
post,
|
|
variant: variantProp = "article",
|
|
leadingImageSrc,
|
|
leadingImageAlt,
|
|
rulePreview,
|
|
contentTone,
|
|
}) => {
|
|
const variant = variantProp;
|
|
|
|
const getBackgroundImage = (blogPost: BlogPost): string => {
|
|
if (blogPost.frontmatter?.thumbnail?.horizontal) {
|
|
return `/content/blog/${blogPost.frontmatter.thumbnail.horizontal}`;
|
|
}
|
|
return getAssetPath("assets/Content_Banner.svg");
|
|
};
|
|
|
|
const getBannerImageMd = (blogPost: BlogPost): string => {
|
|
if (blogPost.frontmatter?.banner?.horizontal) {
|
|
return `/content/blog/${blogPost.frontmatter.banner.horizontal}`;
|
|
}
|
|
if (blogPost.frontmatter?.thumbnail?.horizontal) {
|
|
return `/content/blog/${blogPost.frontmatter.thumbnail.horizontal}`;
|
|
}
|
|
return getAssetPath("assets/Content_Banner_2.svg");
|
|
};
|
|
|
|
const backgroundImageSm =
|
|
variant === "article" ? getBackgroundImage(post) : undefined;
|
|
const backgroundImageMd =
|
|
variant === "article" ? getBannerImageMd(post) : undefined;
|
|
|
|
return (
|
|
<ContentBannerView
|
|
variant={variant}
|
|
post={post}
|
|
leadingImageSrc={leadingImageSrc}
|
|
leadingImageAlt={leadingImageAlt}
|
|
backgroundImageSm={backgroundImageSm}
|
|
backgroundImageMd={backgroundImageMd}
|
|
rulePreview={rulePreview}
|
|
contentTone={contentTone}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
ContentBannerContainer.displayName = "ContentBanner";
|
|
|
|
export default ContentBannerContainer;
|