export function SocialButtonGroup() {
  return (
    <div className="flex flex-row w-100  grow justify-center">
      <a
        className="border border-indigo-600 text-indigo-600  duration-300 hover:bg-indigo-200 rounded-3xl  h-8 mr-1 grow hover:cursor-pointer"
        type="button"
        href="https://www.linkedin.com/company/graphqlvisualizer"
        target="_blank"
        rel="noreferrer"
      >
        <svg className="h-6 m-auto mt-1" id="linkedin" viewBox="0 0 24 24">
          <path
            fill="none"
            strokeLinejoin="round"
            strokeLinecap="round"
            strokeWidth="1"
            stroke="currentColor"
            d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2v0a2 2 0 00-2 2v7h-4v-7a6 6 0 016-6v0zM2 9h4v12H2V9zM6 4a2 2 0 11-3.999.001A2 2 0 016 4z"
          />
        </svg>
      </a>
      <a
        className="border border-indigo-600 text-indigo-600  duration-300 hover:bg-indigo-200 rounded-3xl  h-8 ml-1 grow hover:cursor-pointer "
        type="button"
        href="https://github.com/graphqlvisualizer/plugins"
        target="_blank"
        rel="noreferrer"
      >
        <svg className="h-6 m-auto mt-1" id="github" viewBox="0 0 24 24">
          <path
            fill="none"
            strokeLinejoin="round"
            strokeLinecap="round"
            strokeWidth="1"
            stroke="currentColor"
            d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.36 3.36 0 00-.941-2.611l.001.001c3.14-.35 6.44-1.54 6.44-7a5.422 5.422 0 00-1.502-3.752L20 4.77a4.97 4.97 0 00.32-1.773c0-.722-.151-1.408-.423-2.03L19.91 1S18.73.65 16 2.48c-1.05-.296-2.255-.466-3.5-.466s-2.45.17-3.594.488L9 2.48C6.27.65 5.09 1 5.09 1a4.992 4.992 0 00-.41 1.997c0 .637.117 1.246.332 1.807L5 4.769A5.418 5.418 0 003.5 8.52v.03-.002c0 5.42 3.3 6.61 6.44 7a3.357 3.357 0 00-.939 2.591L9 18.128v3.87"
          />
        </svg>
      </a>
    </div>
  );
}
