graphql.github.io/src/components/index-page/who-is-using.tsx at source · graphql/graphql.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import Link from "next/link"
import facebookLogo from "../../../public/users/logos/facebook.png"
import githubLogo from "../../../public/users/logos/github.png"
import pinterestLogo from "../../../public/users/logos/pinterest.png"
import intuitLogo from "../../../public/users/logos/intuit.png"
import courseraLogo from "../../../public/users/logos/coursera.png"
import shopifyLogo from "../../../public/users/logos/shopify.png"
import NextImage from "next-image-export-optimizer"
import { clsx } from "clsx"

export function WhoIsUsing() {
  return (
    <div className="index-gradient">
      <section id="whos-using">
        <div className="conf-block container flex flex-col items-center">
          <h2>Who's using GraphQL?</h2>
          <p className="text-balance text-center">
            Facebook's mobile apps have been powered by GraphQL since 2012. A
            GraphQL spec was open sourced in 2015 and is now available in many
            environments and used by teams of all sizes.
          </p>
          <div className="mb-20 mt-10 flex flex-wrap justify-center gap-10 lg:gap-16">
            {/* Waiting for permission from some of the below */}
            {[
              {
                href: "https://facebook.com",
                alt: "Facebook",
                src: facebookLogo,
              },
              {
                href: "https://docs.github.com/en/graphql",
                alt: "GitHub",
                src: githubLogo,
                className: "dark:invert",
              },
              {
                href: "https://pinterest.com",
                alt: "Pinterest",
                src: pinterestLogo,
              },
              {
                href: "https://intuit.com",
                alt: "Intuit",
                src: intuitLogo,
              },
              {
                href: "https://coursera.org",
                alt: "Coursera",
                src: courseraLogo,
              },
              {
                href: "https://shopify.com",
                alt: "Shopify",
                src: shopifyLogo,
              },
            ].map(({ alt, src, className, href }) => (
              <a
                key={alt}
                href={href}
                target="_blank"
                rel="noreferrer"
                className="shrink-0"
              >
                <NextImage
                  src={src}
                  alt={alt}
                  title={alt}
                  className={clsx("h-16 w-auto lg:h-28", className)}
                />
              </a>
            ))}
            {/** /}
             <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
             <img src="/users/logos/twitter.png" title="Twitter" className="round" />
             </a>
             {/**/}
            {/** /}
             <a href="https://www.airbnb.com/" target="_blank" rel="noopener noreferrer">
             <img src="/users/logos/airbnb.png" title="Airbnb" className="round" />
             </a>
             {/**/}
          </div>

          <Link href="/users" className="index-button">
            More GraphQL Users
          </Link>
        </div>
      </section>
    </div>
  )
}