function Supports()

in src/components/Sections/WhyDevlake.tsx [36:112]
77 lines of code
1 McCabe index (conditional complexity)

function Supports() {
  return (
    <div
      className=" flex flex-col items-center
      mt-[48px] mb-[72px]
      sm:mt-[36px] sm:mb-[60px]
      mobile:mt-4 mobile:mb-6
    "
    >
      <C.H3Title>Supported Data Sources</C.H3Title>
      <div
        className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]
        sm:gap-x-1"
      >
        <C.Sup title="Jira">
          <a href="https://devlake.apache.org/docs/Plugins/jira" target="_blank">
            <C.SupImg src={Sup1} />
          </a>
        </C.Sup>
        <C.Sup title="TAPD">
          <a href="https://devlake.apache.org/docs/Plugins/tapd" target="_blank">
            <Sup2 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="GitHub">
          <a href="https://devlake.apache.org/docs/Plugins/github" target="_blank">
            <Sup3 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="GitLab">
          <a href="https://devlake.apache.org/docs/Plugins/gitlab" target="_blank">
            <Sup4 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="BitBucket">
          <a href="https://devlake.apache.org/docs/Plugins/bitbucket" target="_blank">
            <Sup5 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="Gitee">
          <a href="https://devlake.apache.org/docs/Plugins/gitee" target="_blank">
            <Sup6 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="Jenkins">
          <a href="https://devlake.apache.org/docs/Plugins/jenkins" target="_blank">
            <Sup7 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="GitHub Action">
          <a href="https://devlake.apache.org/docs/Plugins/github" target="_blank">
            <Sup8 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="GitLab CI">
          <a href="https://devlake.apache.org/docs/Plugins/gitlab" target="_blank">
            <Sup9 className="sm:w-[48px] sm:h-[48px]" />
          </a>
        </C.Sup>
        <C.Sup title="Feishu">
          <a href="https://devlake.apache.org/docs/Plugins/feishu" target="_blank">
            <C.SupImg src={SupA} />
          </a>
        </C.Sup>
      </div>
      <div
        className="text-label18 font-inter text-neutral-500 mt-6
        sm:text-label16 sm:mt-4"
      >
        Check out all {" "}
        <C.InlineLink link="https://devlake.apache.org/docs/Overview/SupportedDataSources">
        supported data sources
        </C.InlineLink>
      </div>
    </div>
  );
}