logo-cloud-2

1import { PlusIcon } from "lucide-react";
2import { cn } from "@/lib/utils";
3 
4type Logo = {
5  src: string;
6  alt: string;
7  width?: number;
8  height?: number;
9};
10 
11type LogoCloudProps = React.ComponentProps<"div">;
12 
13export function LogoCloud({ className, ...props }: LogoCloudProps) {
14  return (
15    <div
16      className={cn("grid grid-cols-2 border md:grid-cols-4", className)}
17      {...props}
18    >
19      <LogoCard
20        className="relative border-r border-b bg-secondary dark:bg-secondary/30"
21        logo={{
22          src: "https://svgl.app/library/nvidia-wordmark-light.svg",
23          alt: "Nvidia Logo",
24        }}
25      >
26        <PlusIcon
27          className="-right-[12.5px] -bottom-[12.5px] absolute z-10 size-6"
28          strokeWidth={1}
29        />
30      </LogoCard>
31 
32      <LogoCard
33        className="border-b md:border-r"
34        logo={{
35          src: "https://svgl.app/library/supabase_wordmark_light.svg",
36          alt: "Supabase Logo",
37        }}
38      />
39 
40      <LogoCard
41        className="relative border-r border-b md:bg-secondary dark:md:bg-secondary/30"
42        logo={{
43          src: "https://svgl.app/library/github_wordmark_light.svg",
44          alt: "GitHub Logo",
45        }}
46      >
47        <PlusIcon
48          className="-right-[12.5px] -bottom-[12.5px] absolute z-10 size-6"
49          strokeWidth={1}
50        />
51        <PlusIcon
52          className="-bottom-[12.5px] -left-[12.5px] absolute z-10 hidden size-6 md:block"
53          strokeWidth={1}
54        />
55      </LogoCard>
56 
57      <LogoCard
58        className="relative border-b bg-secondary md:bg-background dark:bg-secondary/30 md:dark:bg-background"
59        logo={{
60          src: "https://svgl.app/library/openai_wordmark_light.svg",
61          alt: "OpenAI Logo",
62        }}
63      />
64 
65      <LogoCard
66        className="relative border-r border-b bg-secondary md:border-b-0 md:bg-background dark:bg-secondary/30 md:dark:bg-background"
67        logo={{
68          src: "https://svgl.app/library/turso-wordmark-light.svg",
69          alt: "Turso Logo",
70        }}
71      >
72        <PlusIcon
73          className="-right-[12.5px] -bottom-[12.5px] md:-left-[12.5px] absolute z-10 size-6 md:hidden"
74          strokeWidth={1}
75        />
76      </LogoCard>
77 
78      <LogoCard
79        className="border-b bg-background md:border-r md:border-b-0 md:bg-secondary dark:md:bg-secondary/30"
80        logo={{
81          src: "https://svgl.app/library/clerk-wordmark-light.svg",
82          alt: "Clerk Logo",
83        }}
84      />
85 
86// … truncated