adilallo
102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
|
|
import ContentContainerView from "./ContentContainer.view";
|
|
import type { ContentContainerProps } from "./ContentContainer.types";
|
|
|
|
const ContentContainerContainer = memo<ContentContainerProps>(
|
|
({ post, width = "200px", size: sizeProp = "responsive" }) => {
|
|
const size = sizeProp;
|
|
// Get the corresponding icon based on the same logic as background images
|
|
const getIconImage = (slug: string): string => {
|
|
const icons = [
|
|
getAssetPath(ASSETS.ICON_1),
|
|
getAssetPath(ASSETS.ICON_2),
|
|
getAssetPath(ASSETS.ICON_3),
|
|
];
|
|
|
|
if (!slug) return icons[0];
|
|
|
|
// Use the same cycling logic as background images to ensure matching
|
|
const slugOrder = [
|
|
"building-community-trust",
|
|
"operational-security-mutual-aid",
|
|
"making-decisions-without-hierarchy",
|
|
"resolving-active-conflicts",
|
|
];
|
|
const index = slugOrder.indexOf(slug);
|
|
const finalIndex = index >= 0 ? index % icons.length : 0;
|
|
return icons[finalIndex];
|
|
};
|
|
|
|
const iconImage = getIconImage(post.slug);
|
|
|
|
// Format date
|
|
const formattedDate = new Date(post.frontmatter.date).toLocaleDateString(
|
|
"en-US",
|
|
{
|
|
year: "numeric",
|
|
month: "long",
|
|
},
|
|
);
|
|
|
|
// Choose styling based on size prop
|
|
const containerClasses =
|
|
size === "xs"
|
|
? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
|
|
: "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
|
|
|
|
const contentGapClasses =
|
|
size === "xs"
|
|
? "flex flex-col gap-[var(--measures-spacing-008)]"
|
|
: "flex flex-col gap-[var(--measures-spacing-008)] sm:gap-[var(--measures-spacing-012)] md:gap-[var(--measures-spacing-008)] lg:gap-[var(--measures-spacing-016)] xl:gap-[var(--measures-spacing-004)]";
|
|
|
|
const textGapClasses =
|
|
size === "xs"
|
|
? "flex flex-col gap-[var(--measures-spacing-004)]"
|
|
: "flex flex-col gap-[var(--measures-spacing-004)] md:gap-[var(--measures-spacing-002)] lg:gap-[var(--measures-spacing-004)]";
|
|
|
|
const titleClasses =
|
|
size === "xs"
|
|
? "font-bricolage font-medium text-[18px] leading-[120%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors"
|
|
: "font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200 transition-colors";
|
|
|
|
const descriptionClasses =
|
|
size === "xs"
|
|
? "font-inter font-normal text-[12px] leading-[16px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
|
|
: "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)]";
|
|
|
|
const authorClasses =
|
|
size === "xs"
|
|
? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
|
|
: "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]";
|
|
|
|
const dateClasses =
|
|
size === "xs"
|
|
? "font-inter font-normal text-[10px] leading-[14px] text-[var(--color-content-inverse-brand-royal)]"
|
|
: "font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] text-[var(--color-content-inverse-brand-royal)]";
|
|
|
|
return (
|
|
<ContentContainerView
|
|
post={post}
|
|
width={width}
|
|
size={size}
|
|
iconImage={iconImage}
|
|
containerClasses={containerClasses}
|
|
contentGapClasses={contentGapClasses}
|
|
textGapClasses={textGapClasses}
|
|
titleClasses={titleClasses}
|
|
descriptionClasses={descriptionClasses}
|
|
authorClasses={authorClasses}
|
|
dateClasses={dateClasses}
|
|
formattedDate={formattedDate}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
ContentContainerContainer.displayName = "ContentContainer";
|
|
|
|
export default ContentContainerContainer;
|