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>
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
/**
|
||
* Figma: "Section / Logo Wall" (18847:22366)
|
||
* Index frames: 320–429 2×3 grid, 430–639 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;
|