adilallo
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
"use client";
|
|
|
|
const LogoWall = ({ logos = [] }) => {
|
|
// Default logos if none provided - ordered to match the screenshot
|
|
const defaultLogos = [
|
|
{
|
|
src: "assets/Section/Logo_FoodNotBombs.png",
|
|
alt: "Food Not Bombs",
|
|
size: "h-11",
|
|
},
|
|
{
|
|
src: "assets/Section/Logo_StartCOOP.png",
|
|
alt: "Start COOP",
|
|
size: "h-11",
|
|
},
|
|
{ src: "assets/Section/Logo_Metagov.png", alt: "Metagov", size: "h-7" },
|
|
{
|
|
src: "assets/Section/Logo_OpenCivics.png",
|
|
alt: "Open Civics",
|
|
size: "h-7",
|
|
},
|
|
{
|
|
src: "assets/Section/Logo_MutualAidCO.png",
|
|
alt: "Mutual Aid CO",
|
|
size: "h-11",
|
|
},
|
|
{
|
|
src: "assets/Section/Logo_CUBoulder.png",
|
|
alt: "CU Boulder",
|
|
size: "h-11",
|
|
},
|
|
];
|
|
|
|
const displayLogos = logos.length > 0 ? logos : defaultLogos;
|
|
|
|
return (
|
|
<section className="p-[var(--spacing-scale-032)]">
|
|
<div className="flex flex-col gap-[var(--spacing-scale-032)]">
|
|
{/* Label */}
|
|
<p className="font-inter font-medium text-[10px] leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
|
|
Trusted by leading cooperators
|
|
</p>
|
|
|
|
{/* Logo Grid Container */}
|
|
<div className="opacity-60">
|
|
<div className="grid grid-cols-2 grid-rows-3 gap-[var(--spacing-scale-032)]">
|
|
{displayLogos.map((logo, index) => (
|
|
<div key={index} className="flex items-center justify-center">
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
className={`${logo.size || "h-8"} w-auto object-contain`}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default LogoWall;
|