Pinned Repos - GraphQL

pinned_repos.js

const Projects = () => {
  const data = useStaticQuery(graphql`
    query MyQuery {
      githubData {
        data {
          repositoryOwner {
            pinnedItems {
              edges {
                node {
                  name
                  description
                  url
                  primaryLanguage {
                    color
                    name
                  }
                }
              }
            }
          }
        }
      }
    }
  `);

  const items = data.githubData.data.repositoryOwner.pinnedItems;
  const pinnedRepos = items.edges;

  return (
    <div>
      <section>
        <div class="md:grid md:grid-cols-2 gap-4">
          {pinnedRepos.map((r) => {
            const bgColor = {
              backgroundColor: r.node.primaryLanguage.color,
            };

            return (
              <div
                id="project-outer-container"
                class="text-sm border-solid border border-indigo-600 rounded mb-4 md:mb-0 pb-4">
                <div id="project-inner-container" class="p-4 relative">
                  <div id="project-title" class="flex items-center">
                    <span class="mr-3 text-xl">
                      <GoRepo />
                    </span>
                    <a href={r.node.url}>{r.node.name}</a>
                  </div>
                  <div id="project-about">
                    <p class="">{r.node.description}</p>
                  </div>
                  <div id="project-lang" class="absolute bottom-0 flex items-center">
                    <div style={bgColor} class="rounded-full h-3 w-3"></div>
                    <span class="ml-3">{r.node.primaryLanguage.name}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
};

export default Projects;