CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Resolve errors with migrated components

Browse Source
This commit is contained in:
adilallo
2026-01-29 19:07:59 -07:00
parent 539f6c62e3
commit f7e0b5f517
13 changed files with 675 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/LogoWall/LogoWall.container.tsx
+28 -25
View File
@@ -6,40 +6,40 @@ import type { LogoWallProps } from "./LogoWall.types";
const defaultLogos = [
{
src: "/assets/logo-1.svg",
alt: "Partner Logo 1",
width: 120,
height: 40,
src: "/assets/Section/Logo_FoodNotBombs.png",
alt: "Food Not Bombs",
size: "h-11 lg:h-14 xl:h-[70px]",
order: "order-1 sm:order-4", // Mobile: row 1 col 1, SM: row 2 col 1 (bottom left)
},
{
src: "/assets/logo-2.svg",
alt: "Partner Logo 2",
width: 120,
height: 40,
src: "/assets/Section/Logo_StartCOOP.png",
alt: "Start COOP",
size: "h-[42px] lg:h-[53px] xl:h-[66px]",
order: "order-2 sm:order-2", // Mobile: row 1 col 2, SM: row 1 col 2 (top middle)
},
{
src: "/assets/logo-3.svg",
alt: "Partner Logo 3",
width: 120,
height: 40,
src: "/assets/Section/Logo_Metagov.png",
alt: "Metagov",
size: "h-6 lg:h-8 xl:h-[41px]",
order: "order-3 sm:order-1", // Mobile: row 2 col 1, SM: row 1 col 1 (top left)
},
{
src: "/assets/logo-4.svg",
alt: "Partner Logo 4",
width: 120,
height: 40,
src: "/assets/Section/Logo_OpenCivics.png",
alt: "Open Civics",
size: "h-8 lg:h-10 xl:h-[50px]",
order: "order-4 sm:order-5 md:order-6", // Mobile: row 2 col 2, SM: row 2 col 2, MD: swapped with Mutual Aid CO
},
{
src: "/assets/logo-5.svg",
alt: "Partner Logo 5",
width: 120,
height: 40,
src: "/assets/Section/Logo_MutualAidCO.png",
alt: "Mutual Aid CO",
size: "h-11 lg:h-14 xl:h-[70px]",
order: "order-5 sm:order-6 md:order-5", // Mobile: row 3 col 1, SM: row 2 col 3, MD: swapped with OpenCivics
},
{
src: "/assets/logo-6.svg",
alt: "Partner Logo 6",
width: 120,
height: 40,
src: "/assets/Section/Logo_CUBoulder.png",
alt: "CU Boulder",
size: "h-10 lg:h-12 xl:h-[60px]",
order: "order-6 sm:order-3", // Mobile: row 3 col 2, SM: row 1 col 3 (top right)
},
];
@@ -47,7 +47,10 @@ const LogoWallContainer = memo<LogoWallProps>(
({ logos, className = "" }) => {
const [isVisible, setIsVisible] = useState(false);
const displayLogos = useMemo(() => logos || defaultLogos, [logos]);
const displayLogos = useMemo(
() => (logos && logos.length > 0 ? logos : defaultLogos),
[logos],
);
useEffect(() => {
// Trigger fade-in animation after component mounts
app/components/LogoWall/LogoWall.types.ts
+4
View File
@@ -4,6 +4,8 @@ export interface LogoWallProps {
alt: string;
width?: number;
height?: number;
size?: string;
order?: string;
}>;
className?: string;
}
@@ -15,6 +17,8 @@ export interface LogoWallViewProps {
alt: string;
width?: number;
height?: number;
size?: string;
order?: string;
}>;
className: string;
}
app/components/LogoWall/LogoWall.view.tsx
+44 -18
View File
@@ -1,30 +1,56 @@
"use client";
import { memo } from "react";
import Image from "next/image";
import type { LogoWallViewProps } from "./LogoWall.types";
function LogoWallView({ isVisible, displayLogos, className }: LogoWallViewProps) {
function LogoWallView({
isVisible,
displayLogos,
className,
}: LogoWallViewProps) {
return (
<div
className={`flex flex-wrap items-center justify-center gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-048)] transition-opacity duration-1000 ${
isVisible ? "opacity-100" : "opacity-0"
} ${className}`}
<section
className={`p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
>
{displayLogos.map((logo, index) => (
<div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
{/* Label */}
<p className="font-inter font-medium text-[10px] leading-[12px] xl:text-[14px] xl:leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
Trusted by leading cooperators
</p>
{/* Logo Grid Container */}
<div
key={`${logo.src}-${index}`}
className="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300"
className={`transition-opacity duration-500 ${
isVisible ? "opacity-60" : "opacity-0"
}`}
>
<Image
src={logo.src}
alt={logo.alt}
width={logo.width || 120}
height={logo.height || 40}
className="object-contain"
loading="lazy"
/>
<div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:justify-between md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
{displayLogos.map((logo, index) => (
<div
key={index}
className={`flex items-center justify-center transition-opacity duration-500 hover:opacity-100 ${
logo.order || ""
}`}
>
<Image
src={logo.src}
alt={logo.alt}
className={`${
logo.size || "h-8"
} w-auto object-contain transition-transform duration-500 hover:scale-105`}
priority={index < 2} // Prioritize first 2 logos for above-the-fold loading
unoptimized // Skip optimization for local images
width={0}
height={0}
sizes="100vw"
/>
</div>
))}
</div>
</div>
))}
</div>
</div>
</section>
);
}