Reorganize components

2026-02-05 22:37:00 -07:00
parent db3c0274f6
commit 6f178e934f
61 changed files with 45 additions and 44 deletions
@@ -0,0 +1,103 @@
+"use client";
+
+import { memo } from "react";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
+import ContentContainerView from "./ContentContainer.view";
+import type { ContentContainerProps } from "./ContentContainer.types";
+import { normalizeContentContainerSize } from "../../../../lib/propNormalization";
+
+const ContentContainerContainer = memo<ContentContainerProps>(
+  ({ post, width = "200px", size: sizeProp = "responsive" }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeContentContainerSize(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;