51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Image from "next/image";
|
|
import type { LogoWallViewProps } from "./LogoWall.types";
|
|
|
|
function LogoWallView({
|
|
heading,
|
|
displayLogos,
|
|
className,
|
|
}: LogoWallViewProps) {
|
|
return (
|
|
<section
|
|
className={`bg-[var(--color-surface-default-primary)] p-[var(--space-800)] md:px-[var(--space-600)] md:py-[var(--space-800)] lg:px-[var(--space-1800)] lg:py-[var(--space-1200)] xl:px-[160px] xl:py-[var(--space-1800)] ${className}`}
|
|
>
|
|
<div className="flex flex-col items-center gap-[var(--space-800)] md:gap-[var(--space-600)] xl:gap-[var(--space-800)]">
|
|
<p className="font-inter text-center text-[10px] font-medium uppercase leading-[12px] text-[var(--color-content-default-primary)] xl:text-[14px] xl:leading-[12px]">
|
|
{heading}
|
|
</p>
|
|
<div className="w-full opacity-60">
|
|
<div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:w-full md:flex-nowrap md:items-center md:justify-between gap-[38.4px] lg:gap-[var(--space-1200)]">
|
|
{displayLogos.map((logo, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex items-center justify-center md:shrink-0 ${
|
|
logo.order || ""
|
|
}`}
|
|
>
|
|
<Image
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
className={`${logo.size || "h-8"} w-auto object-contain`}
|
|
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>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
LogoWallView.displayName = "LogoWallView";
|
|
|
|
export default memo(LogoWallView);
|