logo-cloud-1

1import { cn } from "@/lib/utils";
2 
3type Logo = {
4  src: string;
5  alt: string;
6  width?: number;
7  height?: number;
8};
9 
10type LogoCloudProps = React.ComponentProps<"div"> & {
11  logos: Logo[];
12};
13 
14export function LogoCloud({ logos, className, ...props }: LogoCloudProps) {
15  return (
16    <div
17      className={cn(
18        "mx-auto grid max-w-3xl grid-cols-2 rounded-lg bg-border shadow md:grid-cols-4",
19        className
20      )}
21      {...props}
22    >
23      {logos.map((logo) => (
24        <div
25          className="flex items-center justify-center rounded-lg border bg-background p-8"
26          key={logo.alt}
27        >
28          <img
29            alt={logo.alt}
30            className="pointer-events-none block h-4 select-none md:h-5 dark:brightness-0 dark:invert"
31            height={logo.height ?? "auto"}
32            loading="lazy"
33            src={logo.src}
34            width={logo.width ?? "auto"}
35          />
36        </div>
37      ))}
38    </div>
39  );
40}