Logos Section

1import { ReactNode } from "react";
2 
3 
4import Figma from "../../logos/figma";
5import React from "../../logos/react";
6import ShadcnUi from "../../logos/shadcn-ui";
7import Tailwind from "../../logos/tailwind";
8import TypeScript from "../../logos/typescript";
9import { Badge } from "../../ui/badge";
10import Logo from "../../ui/logo";
11import { Section } from "../../ui/section";
12 
13interface LogosProps {
14  title?: string;
15  badge?: ReactNode | false;
16  logos?: ReactNode[] | false;
17  className?: string;
18}
19 
20export default function Logos({
21  title = "Built with industry-standard tools and best practices",
22  badge = (
23    <Badge variant="outline" className="border-brand/30 text-brand">
24      Last updated: 1000
25    </Badge>
26  ),
27  logos = [
28    <Logo key="figma" image={Figma} name="Figma" />,
29    <Logo
30      key="react"
31      image={React}
32      name="React"
33      version="19.2.7"
34      badge="New"
35    />,
36    <Logo
37      key="typescript"
38      image={TypeScript}
39      name="TypeScript"
40      version="6.0.3"
41      badge="New"
42    />,
43    <Logo
44      key="shadcn"
45      image={ShadcnUi}
46      name="Shadcn/ui"
47      version="4.11.0"
48      badge="New"
49    />,
50    <Logo key="tailwind" image={Tailwind} name="Tailwind" version="4.2.1" />,
51  ],
52  className,
53}: LogosProps) {
54  return (
55    <Section className={className}>
56      <div className="max-w-container mx-auto flex flex-col items-center gap-8 text-center">
57        <div className="flex flex-col items-center gap-6">
58          {badge !== false && badge}
59          <h2 className="text-md font-semibold sm:text-2xl">{title}</h2>
60        </div>
61        {logos !== false && logos.length > 0 && (
62          <div className="flex flex-wrap items-center justify-center gap-8">
63            {logos}
64          </div>
65        )}
66      </div>
67    </Section>
68  );
69}