Repository: expo/expo
File: docs/ui/components/PageHeader/PageTitleButtons.tsx (TypeScript)

Code before:
          openInNewTab
          href={githubUrl(router.pathname)}
          aria-label="Edit content of this page on GitHub">
          <div className="flex flex-row items-center gap-2">
            <Edit05Icon className="icon-sm text-icon-secondary" />
            <FOOTNOTE crawlable={false} theme="secondary">
              Edit page
            </FOOTNOTE>
          </div>
        </Button>
      )}
      {(sourceCodeUrl ||
        sourceCodeUrl?.startsWith('https://github.com/expo/expo') ||
        packageName) && (
        <span className="flex items-center">
          {sourceCodeUrl && (
            <>
              <SdkPackageButton
                label="GitHub"
                Icon={GithubIcon}
                href={sourceCodeUrl}
                tooltip="View source code on GitHub"
              />
              {(packageName || sourceCodeUrl?.startsWith('https://github.com/expo/expo')) && (
                <div className="max-sm:hidden bg-secondary mx-1 h-5 w-px" />
              )}
            </>
          )}
          {packageName && (
            <>
              <SdkPackageButton
                label="npm"
                Icon={NpmIcon}
                href={`https://www.npmjs.com/package/${packageName}`}
                tooltip="View library in npm registry"
              />
              {sourceCodeUrl?.startsWith('https://github.com/expo/expo') && (
                <div className="max-sm:hidden bg-secondary mx-1 h-5 w-px" />
              )}
            </>
          )}
          {sourceCodeUrl?.startsWith('https://github.com/expo/expo') && (
            <SdkPackageButton
              label="Changelog"
              Icon={ClockRefreshIcon}
              href={`${sourceCodeUrl}/CHANGELOG.md`}
              tooltip="View library changelog on GitHub"
            />
          )}
        </span>
      )}

Review comment (performance):
This seems like a more inefficient way of adding padding compared to the `gap-1` on the containing span. Is there a reason this was necessary?

Code after:
          openInNewTab
          href={githubUrl(router.pathname)}
          aria-label="Edit content of this page on GitHub">
          <div className="flex flex-row items-center gap-2">
            <Edit05Icon className="icon-sm text-icon-secondary" />
            <FOOTNOTE crawlable={false} theme="secondary">
              Edit page
            </FOOTNOTE>
          </div>
        </Button>
      )}
      {(sourceCodeUrl ||
        sourceCodeUrl?.startsWith('https://github.com/expo/expo') ||
        packageName) && (
        <span className="flex items-center gap-1">
          {sourceCodeUrl && (
            <>
              <SdkPackageButton
                label="GitHub"
                Icon={GithubIcon}
                href={sourceCodeUrl}
                tooltip="View source code on GitHub"
              />
              {(packageName || sourceCodeUrl?.startsWith('https://github.com/expo/expo')) && (
                <div className="max-sm:hidden bg-secondary h-5 w-px" />
              )}
            </>
          )}
          {packageName && (
            <>
              <SdkPackageButton
                label="npm"
                Icon={NpmIcon}
                href={`https://www.npmjs.com/package/${packageName}`}
                tooltip="View library in npm registry"
              />
              {sourceCodeUrl?.startsWith('https://github.com/expo/expo') && (
                <div className="max-sm:hidden bg-secondary h-5 w-px" />
              )}
            </>
          )}
          {sourceCodeUrl?.startsWith('https://github.com/expo/expo') && (
            <SdkPackageButton
              label="Changelog"
              Icon={ClockRefreshIcon}
              href={`${sourceCodeUrl}/CHANGELOG.md`}
              tooltip="View library changelog on GitHub"
            />
          )}
        </span>
      )}