Files
community-rule/app/components/sections/LogoWall/LogoWall.container.tsx
T
adilalloandCursor 3cdf4174d0 Match partner logo wall spacing and sizes to Figma on every breakpoint (CR-130).
Restore asset/Logo import casing so Turbopack can resolve the module, and align the site lockup gaps with the Figma Asset/Logo instances.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-18 18:24:54 -06:00

77 lines
2.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
/**
* Figma: "Section / Logo Wall" (18847:22366)
* Index frames: 320429 2×3 grid, 430639 3×2 grid, 640+ space-between row.
* Logo heights from those instances (1× / 1.25 at lg / 1.5625 at xl).
*/
import { memo, useMemo } from "react";
import { useTranslation } from "../../../contexts/MessagesContext";
import { getAssetPath, partnerLogoPath } from "../../../../lib/assetUtils";
import LogoWallView from "./LogoWall.view";
import type { LogoWallProps } from "./LogoWall.types";
const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
const t = useTranslation("logoWall");
const defaultLogos = useMemo(
() => [
{
src: getAssetPath(partnerLogoPath("food-not-bombs")),
alt: t("partners.foodNotBombs"),
size: "h-[48px] lg:h-[60px] xl:h-[74.6px]",
order: "sm:order-4 md:order-4",
},
{
src: getAssetPath(partnerLogoPath("start-coop")),
alt: t("partners.startCoop"),
size: "h-[51.4px] lg:h-[64.2px] xl:h-[80.3px]",
order: "sm:order-1 md:order-3",
},
{
src: getAssetPath(partnerLogoPath("metagov")),
alt: t("partners.metagov"),
size: "h-[26.2px] lg:h-[33px] xl:h-[41px]",
order: "sm:order-6 md:order-1",
},
{
src: getAssetPath(partnerLogoPath("open-civics")),
alt: t("partners.openCivics"),
size: "h-[50.1px] lg:h-[61.1px] xl:h-[72px]",
order: "sm:order-5 md:order-2",
},
{
src: getAssetPath(partnerLogoPath("mutual-aid-co")),
alt: t("partners.mutualAidCo"),
size: "h-[51.1px] lg:h-[63.6px] xl:h-[79.5px]",
order: "sm:order-2 md:order-5",
},
{
src: getAssetPath(partnerLogoPath("cu-boulder")),
alt: t("partners.cuBoulder"),
size: "h-[44.6px] lg:h-[55.8px] xl:h-[69.7px]",
order: "sm:order-3 md:order-6",
},
],
[t],
);
const displayLogos = useMemo(
() => (logos && logos.length > 0 ? logos : defaultLogos),
[logos, defaultLogos],
);
return (
<LogoWallView
heading={t("heading")}
displayLogos={displayLogos}
className={className}
/>
);
});
LogoWallContainer.displayName = "LogoWall";
export default LogoWallContainer;