logo-cloud-3

1// https://motion-primitives.com/docs/infinite-slider
2import { InfiniteSlider } from "@/components/ui/infinite-slider";
3 
4import { cn } from "@/lib/utils";
5 
6type Logo = {
7  src: string;
8  alt: string;
9  width?: number;
10  height?: number;
11};
12 
13type LogoCloudProps = React.ComponentProps<"div"> & {
14  logos: Logo[];
15};
16 
17export function LogoCloud({ className, logos, ...props }: LogoCloudProps) {
18  return (
19    <div
20      {...props}
21      className={cn(
22        "overflow-hidden py-4 [mask-image:linear-gradient(to_right,transparent,black,transparent)]",
23        className
24      )}
25    >
26      <InfiniteSlider gap={42} reverse speed={80} speedOnHover={25}>
27        {logos.map((logo) => (
28          <img
29            alt={logo.alt}
30            className="pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert"
31            height={logo.height || "auto"}
32            key={`logo-${logo.alt}`}
33            loading="lazy"
34            src={logo.src}
35            width={logo.width || "auto"}
36          />
37        ))}
38      </InfiniteSlider>
39    </div>
40  );
41}