adilallo
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* Figma: "Components" / Thumbnail (19428:22574).
|
||
* Vertical 260×390; horizontal 320×225.5; per-article backgrounds in public/content/blog/.
|
||
*/
|
||
import { memo } from "react";
|
||
import {
|
||
contentBlogHorizontalPath,
|
||
contentBlogVerticalPath,
|
||
contentCatalogSlugForFallback,
|
||
CONTENT_CATALOG_SLUG_ORDER,
|
||
} from "../../../../lib/assetUtils";
|
||
import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
|
||
import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
|
||
|
||
const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
|
||
({
|
||
post,
|
||
className = "",
|
||
variant: variantProp = "vertical",
|
||
sizing: sizingProp = "fluid",
|
||
}) => {
|
||
const variant = variantProp;
|
||
const sizing = sizingProp;
|
||
// Get article-specific background image from frontmatter
|
||
const getBackgroundImage = (
|
||
post: ContentThumbnailTemplateProps["post"],
|
||
variant: "vertical" | "horizontal",
|
||
): string => {
|
||
if (post.frontmatter?.thumbnail) {
|
||
const imageName =
|
||
variant === "vertical"
|
||
? post.frontmatter.thumbnail.vertical
|
||
: post.frontmatter.thumbnail.horizontal;
|
||
|
||
if (imageName) {
|
||
return `/content/blog/${imageName}`;
|
||
}
|
||
}
|
||
|
||
const slug = post.slug;
|
||
const resolvedSlug =
|
||
CONTENT_CATALOG_SLUG_ORDER.indexOf(
|
||
slug as (typeof CONTENT_CATALOG_SLUG_ORDER)[number],
|
||
) >= 0
|
||
? slug
|
||
: contentCatalogSlugForFallback(slug);
|
||
|
||
return variant === "vertical"
|
||
? contentBlogVerticalPath(resolvedSlug)
|
||
: contentBlogHorizontalPath(resolvedSlug);
|
||
};
|
||
|
||
const backgroundImage = getBackgroundImage(post, variant);
|
||
|
||
return (
|
||
<ContentThumbnailTemplateView
|
||
post={post}
|
||
className={className}
|
||
variant={variant}
|
||
sizing={sizing}
|
||
backgroundImage={backgroundImage}
|
||
/>
|
||
);
|
||
},
|
||
);
|
||
|
||
ContentThumbnailTemplateContainer.displayName = "ContentThumbnailTemplate";
|
||
|
||
export default ContentThumbnailTemplateContainer;
|