@fortawesome/free-regular-svg-icons#far JavaScript Examples

library.add(
  far,
  fas,
  faBookReader,
  faArrowLeft,
  faArrowRight,
  faQuestionCircle,
  faCopy,
  faSignOutAlt,
  faEdit,
  faAngleDown,
  faExternalLinkAlt,
  fab,
  faEthereum,
  faTwitter,
  faDiscord,
  faUnlink,
  faSearch,
  faFortAwesome,
  faExchangeAlt,
  faChartPie,
  faGlobe,
  faDonate,
  faDollarSign,
);

library.add(far);

library.add(fab, fas, far);

library.add(far);

export default function CommitFileDifferenceComponent(props) {
  library.add(fas, far);
  const { repoId, baseCommit, compareCommit } = props;

  const [fileDifference, setFileDifference] = useState([]);
  const [error, setError] = useState(false);
  const [warn, setWarn] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setFileDifference([]);
    setError(false);
    setLoading(true);

    if (baseCommit === compareCommit) {
      setLoading(false);
      setFileDifference([]);
      return;
    }

    axios({
      url: globalAPIEndpoint,
      method: "POST",
      data: {
        query: `
            query {
                commitCompare (repoId: "${repoId}", baseCommit: "${baseCommit}", compareCommit: "${compareCommit}"){
                    type
                    fileName
                }
            }
          `,
      },
    })
      .then((res) => {
        setLoading(false);

        const difference = res.data.data.commitCompare;
        if (difference) {
          setFileDifference([...difference]);
        } else {
          setError(true);
          setWarn("Error occurred while comparing the selected commits!");
        }
      })
      .catch((err) => {
        setLoading(false);
        setError(true);
        console.log(err);
      });
  }, [repoId, baseCommit, compareCommit]);

  return (
    <div className="my-4 w-11/12 mx-auto p-6 rounded shadow bg-blue-50">
      {baseCommit === compareCommit ? (
        <div className="text-center font-sans font-light text-2xl">
          Same commits cannot be compared
        </div>
      ) : null}
      {error ? (
        <div className="p-3 w-full rounded bg-red-100 border font-sans font-light text-xl">
          Error occurred while fetching comparison results!
          {warn ? (
            <div className="p-2 my-4 mx-auto rounded shadow">
              <div className="text-3xl my-2 font-sans font-light text-yellow-900">
                Warning
              </div>
              {warn.map((msg) => {
                const warnMsg = msg.replace("warning: ", "");
                return (
                  <div className="text-xl font-sans font-semibold text-yellow-800">
                    {warnMsg}
                    {warnMsg.includes("diff.renameLimit") ? (
                      <div className="my-4 mx-2 p-3 rounded bg-white text-green-600 font-sans font-light">
                        run
                        <span className="font-semibold font-mono mx-2">
                          `git config diff.renamelimit 0`
                        </span>
                        from command line to fix this problem
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          ) : null}
        </div>
      ) : null}
      {!error && fileDifference.length > 0 && !loading ? (
        <>
          <div className="text-left font-sans font-semibold text-2xl mx-2 my-4 text-gray-800">
            Differing Files
          </div>
          {fileDifference.map((diff) => {
            const { type, fileName } = diff;
            let iconSelector = "";
            let colorSelector = "";
            let title = "";
            switch (type[0]) {
              case "M":
                iconSelector = "plus-square";
                colorSelector = "text-yellow-600";
                title = "Modified";
                break;
              case "A":
                iconSelector = "plus-square";
                colorSelector = "text-green-500";
                title = "Added";
                break;
              case "D":
                iconSelector = "minus-square";
                colorSelector = "text-red-500";
                title = "Deleted";
                break;
              case "R":
                iconSelector = "caret-square-right";
                colorSelector = "text-indigo-500";
                title = "Renamed";
                break;
              default:
                iconSelector = "stop-circle";
                colorSelector = "text-gray-500";
                title = "Unmerged / Copied / Unknown";
                break;
            }

            return (
              <div
                className="flex items-center align-middle justify-center gap-4"
                key={type + "-" + fileName}
              >
                <div
                  className={`text-2xl cursor-pointer ${colorSelector}`}
                  title={title}
                >
                  <FontAwesomeIcon
                    icon={["far", iconSelector]}
                  ></FontAwesomeIcon>
                </div>
                <div
                  className="w-3/4 font-sans font-light truncate"
                  title={fileName}
                >
                  {fileName}
                </div>
              </div>
            );
          })}
        </>
      ) : null}
      {loading ? (
        <div className="my-2 text-2xl font-sans font-semibold text-gray-500">
          Loading comparison results...
        </div>
      ) : null}
    </div>
  );
}

export default function CompareComponent() {
  library.add(fas, far);

  const [selectedRepo, setSelectedRepo] = useState("");
  const [compareAction, setCompareAction] = useState("");

  useEffect(() => {
    setCompareAction("");
  }, [selectedRepo.id]);

  function activateCompare(repo) {
    setSelectedRepo(repo);
  }

  const memoizedBranchCompareComponent = useMemo(() => {
    return (
      <BranchCompareComponent repoId={selectedRepo.id}></BranchCompareComponent>
    );
  }, [selectedRepo.id]);

  const memoizedCommitCompareComponent = useMemo(() => {
    return (
      <CommitCompareComponent repoId={selectedRepo.id}></CommitCompareComponent>
    );
  }, [selectedRepo.id]);

  const memoizedCompareActionButtons = useMemo(() => {
    return (
      <CompareActionButtons
        selectedRepo={selectedRepo.id}
        compareAction={compareAction}
        setCompareAction={(action) => {
          setCompareAction(action);
        }}
      ></CompareActionButtons>
    );
  }, [compareAction, selectedRepo.id]);

  function noSelectedRepobanner() {
    return (
      <div className="block m-auto text-center w-full">
        <FontAwesomeIcon
          icon={["far", "object-group"]}
          className="font-sans text-center text-gray-300 my-20"
          size="10x"
        ></FontAwesomeIcon>
        <div className="text-6xl text-gray-200">Select a Repo to compare</div>
      </div>
    );
  }

  return (
    <div className="h-full py-10 w-full overflow-auto">
      <div className="font-sans font-light text-3xl mx-10 text-gray-800">
        Compare Branches and Commits
      </div>
      <RepoSearchBar activateCompare={activateCompare}></RepoSearchBar>
      {selectedRepo ? (
        <>
          <CompareActiveRepoPane
            repoName={selectedRepo.repoName}
          ></CompareActiveRepoPane>
          {memoizedCompareActionButtons}
          {compareAction ? (
            compareAction === "branch-compare" ? (
              memoizedBranchCompareComponent
            ) : (
              <>
                {compareAction === "commit-compare"
                  ? memoizedCommitCompareComponent
                  : null}
              </>
            )
          ) : (
            <CompareSelectionHint></CompareSelectionHint>
          )}
        </>
      ) : (
        noSelectedRepobanner()
      )}
    </div>
  );
}

export default function LeftPane(props) {
  library.add(far, fas);
  const { dispatch } = useContext(ContextProvider);
  const menuItemParams = [
    {
      link: "/dashboard/repository",
      icon: (
        <FontAwesomeIcon
          icon={["far", "folder"]}
          className="text-3xl text-gray-500"
        ></FontAwesomeIcon>
      ),
      label: "Repositories",
    },
    {
      link: "/dashboard/compare",
      icon: (
        <FontAwesomeIcon
          icon={["fas", "object-group"]}
          className="text-3xl text-gray-500"
        ></FontAwesomeIcon>
      ),
      label: "Compare",
    },
    {
      link: "/dashboard/settings",
      icon: (
        <FontAwesomeIcon
          icon={["fas", "cog"]}
          className="text-3xl text-gray-500"
        ></FontAwesomeIcon>
      ),
      label: "Settings",
    },
    {
      link: "/dashboard/help",
      icon: (
        <FontAwesomeIcon
          icon={["far", "question-circle"]}
          className="text-3xl text-gray-500"
        ></FontAwesomeIcon>
      ),
      label: "Help",
    },
  ];

  return (
    <div className="bg-white overflow-auto shadow top-0 left-0 bottom-0 p-3 block xl:w-1/4 lg:w-1/3 md:w-1/6 sm:w-1/6 w-1/6">
      <div
        className="flex justify-center items-center bg-blue-50 cursor-pointer p-2 rounded-md"
        onClick={(event) => {
          dispatch({ type: ADD_FORM_CLOSE, payload: true });
          props.parentProps.history.push("/dashboard");
        }}
      >
        <div className="dashboard-leftpane__logo"></div>
        <div className="font-mono xl:text-2xl lg:text-2xl md:text-3xl sm:text-2xl p-4 xl:block lg:block md:hidden sm:hidden hidden">
          <span className="font-bold mx-2 border-b-4 border-pink-400">Git</span>
          Convex
        </div>
      </div>
      <div className="xl:mt-32 lg:mt-24 md:mt-48 sm:mt-56 mt-56 cursor-pointer block items-center align-middle">
        {menuItemParams.map((entry) => {
          return (
            <NavLink
              to={`${entry.link}`}
              exact
              activeClassName="bg-gray-200"
              className="flex p-3 mx-2 border-b xl:justify-between lg:justify-between md:justify-center sm:justify-center justify-center xl:my-0 lg:my-0 md:my-6 sm:my-6 my-6 hover:bg-gray-200"
              key={entry.label}
            >
              <div className="flex gap-10 align-middle items-center my-auto sm:text-center">
                <div className="text-sm w-1/6">
                  {entry.icon}
                </div>
                <div className="text-gray-500 w-5/6 xl:text-2xl lg:text-2xl md:text-xl block xl:block lg:block md:hidden sm:hidden">
                  {entry.label}
                </div>
              </div>
            </NavLink>
          );
        })}
      </div>
    </div>
  );
}

export default function RepositoryCommitLogComponent(props) {
  library.add(fab, fas, far);

  const [commitLogs, setCommitLogs] = useState([]);
  const [isCommitEmpty, setIsCommitEmpty] = useState(false);
  const [skipLimit, setSkipLimit] = useState(0);
  const [totalCommitCount, setTotalCommitCount] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [excessCommit, setExcessCommit] = useState(false);
  const [searchKey, setSearchKey] = useState("");
  const [viewReload, setViewReload] = useState(0);
  const [searchWarning, setSearchWarning] = useState(false);
  const [referenceCommitHash, setReferenceCommitHash] = useState("");

  const searchRef = useRef();
  const searchOptionRef = useRef();

  const debouncedSearch = useRef(
    debounce(commitSearchHandler, 1500, { maxWait: 2000 })
  ).current;

  const searchOptions = ["Commit Hash", "Commit Message", "User"];

  useEffect(() => {
    setIsLoading(true);
    setSearchWarning(false);

    axios({
      url: globalAPIEndpoint,
      method: "POST",
      data: {
        query: `
            query {
              gitCommitLogs(repoId: "${props.repoId}", referenceCommit: "") {
                  totalCommits
                  commits{
                      commitTime
                      hash
                      author
                      commitMessage
                      commitFilesCount
                  }  
              }
          }
          `,
      },
    })
      .then((res) => {
        setIsLoading(false);

        if (res.data.data) {
          const { commits, totalCommits } = res.data.data.gitCommitLogs;

          if (totalCommits <= 10) {
            setExcessCommit(false);
          } else {
            setExcessCommit(true);
          }

          setTotalCommitCount(totalCommits);
          if (commits && commits.length > 0) {
            setCommitLogs([...commits]);
            const len = commits.length;
            setReferenceCommitHash(commits[len - 1].hash);
          } else {
            setIsCommitEmpty(true);
          }
        }
      })
      .catch((err) => {
        setIsLoading(false);

        if (err) {
          setIsCommitEmpty(true);
          console.log(err);
        }
      });
  }, [props, viewReload]);

  function fetchCommitLogs() {
    setIsLoading(true);
    setSearchWarning(false);

    let localLimit = 0;
    localLimit = skipLimit + 10;

    setSkipLimit(localLimit);

    axios({
      url: globalAPIEndpoint,
      method: "POST",
      data: {
        query: `
          query{
            gitCommitLogs(repoId:"${props.repoId}", referenceCommit: "${referenceCommitHash}"){
                totalCommits
                commits{
                    commitTime
                    hash
                    author
                    commitMessage
                    commitFilesCount
                }  
            }
        }
          `,
      },
    })
      .then((res) => {
        setIsLoading(false);

        if (totalCommitCount - localLimit <= 10) {
          setExcessCommit(false);
        }

        if (res.data.data) {
          const { commits, totalCommits } = res.data.data.gitCommitLogs;
          setTotalCommitCount(totalCommits);
          if (commits && commits.length > 0) {
            setCommitLogs([...commitLogs, ...commits]);

            const len = commits.length;
            setReferenceCommitHash(commits[len - 1].hash);
          } else {
            setIsCommitEmpty(true);
          }
        }
      })
      .catch((err) => {
        setIsLoading(false);

        if (err) {
          setIsCommitEmpty(true);
          console.log(err);
        }
      });
  }

  function fetchCommitFiles(commitHash, arrowTarget) {
    const parentDivId = `commitLogCard-${commitHash}`;
    const targetDivId = `commitFile-${commitHash}`;

    const targetDiv = document.createElement("div");
    targetDiv.id = targetDivId;

    const parentDiv = document.getElementById(parentDivId);
    parentDiv.append(targetDiv);

    const unmountHandler = () => {
      ReactDOM.unmountComponentAtNode(
        document.getElementById("closeBtn-" + commitHash)
      );
      ReactDOM.unmountComponentAtNode(document.getElementById(targetDivId));
      arrowTarget.classList.remove("hidden");
    };

    ReactDOM.render(
      <CommitLogFileCard
        repoId={props.repoId}
        commitHash={commitHash}
        unmountHandler={unmountHandler}
      ></CommitLogFileCard>,
      document.getElementById(targetDivId)
    );

    const closeArrow = (
      <div
        className="text-center mx-auto text-3xl font-sans font-light text-gray-600 items-center align-middle cursor-pointer"
        onClick={(event) => {
          unmountHandler();
        }}
      >
        <FontAwesomeIcon icon={["fas", "angle-up"]}></FontAwesomeIcon>
      </div>
    );

    const closeBtn = document.createElement("div");
    const closeBtnId = "closeBtn-" + commitHash;
    closeBtn.id = closeBtnId;
    parentDiv.append(closeBtn);

    ReactDOM.render(closeArrow, document.getElementById(closeBtnId));
  }

  function commitSearchHandler() {
    setIsLoading(true);
    setTotalCommitCount(0);
    setCommitLogs([]);
    const searchQuery = searchRef.current.value;
    let searchOption = "";

    switch (searchOptionRef.current.value) {
      case "Commit Hash":
        searchOption = "hash";
        break;
      case "Commit Message":
        searchOption = "message";
        break;
      case "User":
        searchOption = "user";
        break;
      default:
        searchOption = "message";
        break;
    }

    if (searchQuery) {
      axios({
        url: globalAPIEndpoint,
        method: "POST",
        data: {
          query: `
            query{
              searchCommitLogs(repoId:"${props.repoId}",searchType:"${searchOption}",searchKey:"${searchQuery}"){
                hash
                author
                commitTime
                commitMessage
                commitFilesCount
              }
            }
          `,
        },
      })
        .then((res) => {
          if (res.data.data) {
            const { searchCommitLogs } = res.data.data;
            if (searchCommitLogs && searchCommitLogs.length > 0) {
              setIsCommitEmpty(false);
              setExcessCommit(false);
              setCommitLogs([...searchCommitLogs]);
              setTotalCommitCount(searchCommitLogs.length);
              setIsLoading(false);
            } else {
              setIsCommitEmpty(true);
              setCommitLogs([]);
              setTotalCommitCount(0);
              setIsLoading(false);
              setSearchWarning(true);
            }
          }
        })
        .catch((err) => {
          console.log(err);
          setIsLoading(false);
          setCommitLogs([]);
        });
    } else {
      setViewReload(viewReload + 1);
      setIsLoading(false);
    }
  }

  function fallBackComponent(message) {
    return (
      <div className="p-6 rounded-md shadow-sm block justify-center mx-auto my-auto w-3/4 h-full text-center text-2xl text-indigo-500">
        <div className="flex w-full h-full mx-auto my-auto">
          <div className="block my-auto mx-auto bg-white w-full p-6 rounded-lg shadow">
            <div className="text-2xl text-center font-sans font-semibold text-indigo-800 border-b-2 border-dashed border-indigo-500 p-1">
              {message}
            </div>
            {searchWarning ? (
              <div className="my-4 mx-auto rounded shadow p-4 text-center font-sans text-yellow-800 font-light bg-yellow-50 border-b-4  border-dashed border-yellow-200 text-md">
                Make sure if you are searching with the right category and the
                right search query
              </div>
            ) : null}
            {isLoading ? (
              <div className="flex mx-auto my-6 text-center justify-center">
                <InfiniteLoader loadAnimation={isLoading}></InfiniteLoader>
              </div>
            ) : null}
          </div>
        </div>
      </div>
    );
  }

  function searchbarComponent() {
    return (
      <div className="my-4 w-full rounded-lg bg-white shadow-inner flex gap-4 justify-between items-center">
        <select
          defaultValue="default-search"
          id="searchOption"
          ref={searchOptionRef}
          className="w-1/4 flex p-4 items-center bg-indigo-400 text-white cursor-pointer rounded-l-md text-lg font-sans font-semibold outline-none"
        >
          <option value="default-search" hidden disabled>
            Search for...
          </option>
          {searchOptions.map((item) => {
            return (
              <option key={item} value={item}>
                {item}
              </option>
            );
          })}
        </select>

        <div className="w-3/4 rounded-r-md">
          <input
            ref={searchRef}
            type="text"
            className="w-5/6 outline-none text-lg font-light font-sans"
            placeholder="What are you looking for?"
            value={searchKey}
            onChange={(event) => {
              setSearchKey(event.target.value);
              debouncedSearch();
            }}
          />
        </div>
        <div
          className="w-20 bg-gray-200 p-3 mx-auto my-auto text-center rounded-r-lg hover:bg-gray-400 cursor-pointer"
          onClick={() => {
            commitSearchHandler();
          }}
        >
          <FontAwesomeIcon
            icon={["fas", "search"]}
            className="text-3xl text-gray-600"
          ></FontAwesomeIcon>
        </div>
      </div>
    );
  }

  return (
    <>
      {searchbarComponent()}
      {(isCommitEmpty || !commitLogs || !totalCommitCount) && !isLoading
        ? fallBackComponent("No Commit Logs found")
        : null}
      {commitLogs &&
        commitLogs.map((commit) => {
          const {
            hash,
            author,
            commitTime,
            commitMessage,
            commitFilesCount,
          } = commit;

          let commitRelativeTime = relativeCommitTimeCalculator(commitTime);
          const formattedCommitTime = format(
            new Date(commitTime),
            "MMMM dd, yyyy"
          );

          return (
            <div
              id={`commitLogCard-${hash}`}
              className="p-6 rounded-lg block shadow-md justify-center mx-auto my-4 bg-white w-full border-b-8 border-indigo-400"
              key={hash}
            >
              <div className="flex justify-between text-indigo-400">
                <div className="text-2xl font-sans mx-auto">
                  <FontAwesomeIcon
                    icon={["fas", "calendar-alt"]}
                  ></FontAwesomeIcon>
                  <span className="border-b-2 border-dashed mx-2">
                    {formattedCommitTime}
                  </span>
                </div>
                <div className="h-auto p-1 border-r"></div>
                <div className="text-2xl font-sans mx-auto">
                  <FontAwesomeIcon
                    icon={["fab", "slack-hash"]}
                  ></FontAwesomeIcon>
                  <span className="border-b-2 border-dashed mx-2">
                    {hash.substring(0, 7)}
                  </span>
                </div>
                <div className="h-auto p-1 border-r"></div>
                <div className="text-2xl font-sans mx-auto">
                  <FontAwesomeIcon
                    icon={["fas", "user-ninja"]}
                  ></FontAwesomeIcon>
                  <span className="border-b-2 border-dashed mx-2 truncate">
                    {author}
                  </span>
                </div>
              </div>

              <div className="font-sans font-semibold text-2xl my-4 text-gray-500 p-3 flex justify-evenly items-center">
                <div className="w-1/8">
                  <FontAwesomeIcon
                    icon={["fas", "code"]}
                    className="text-3xl"
                  ></FontAwesomeIcon>
                </div>
                <div className="w-5/6 mx-3">{commitMessage}</div>
              </div>

              <div className="w-11/12 flex justify-between mx-auto mt-4 font-sans text-xl text-gray-500">
                <div className="w-1/3 flex justify-center my-auto items-center align-middle">
                  <div>
                    <FontAwesomeIcon icon={["far", "clock"]}></FontAwesomeIcon>
                  </div>
                  <div className="mx-2 border-dashed border-b-4">
                    {commitRelativeTime}
                  </div>
                </div>
                <div
                  className="w-1/3 flex justify-around my-auto font-sans text-3xl font-light pt-10 cursor-pointer text-gray-500"
                  onClick={(event) => {
                    if (commitFilesCount) {
                      event.currentTarget.classList.add("hidden");
                      fetchCommitFiles(hash, event.currentTarget);
                    }
                  }}
                >
                  {commitFilesCount ? (
                    <FontAwesomeIcon
                      icon={["fas", "angle-down"]}
                    ></FontAwesomeIcon>
                  ) : (
                    <FontAwesomeIcon
                      icon={["fas", "dot-circle"]}
                      className="text-xl text-gray-200"
                    ></FontAwesomeIcon>
                  )}
                </div>
                <div className="w-1/3 flex justify-center my-auto items-center align-middle">
                  <div>
                    <FontAwesomeIcon
                      icon={["far", "plus-square"]}
                    ></FontAwesomeIcon>
                  </div>
                  <div className="mx-2 border-dashed border-b-4">
                    {commitFilesCount ? (
                      `${commitFilesCount} Files`
                    ) : (
                      <span className="text-gray-500">No Changed Files</span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      {excessCommit ? (
        <div
          className="fixed flex bottom-0 right-0 w-16 h-16 mx-auto p-6 rounded-full shadow-md text-center bg-indigo-500 text-white text-2xl mb-6 mr-6 cursor-pointer"
          title="Click to load commits"
          onClick={() => {
            if (commitLogs.length > skipLimit) {
              fetchCommitLogs();
            }
          }}
        >
          <FontAwesomeIcon
            icon={["fas", "angle-double-down"]}
          ></FontAwesomeIcon>
        </div>
      ) : null}
      {isLoading && totalCommitCount ? (
        <div className="my-4 rounded-lg p-3 bg-gray-100 text-lg font-semibold font-sans text-gray-700 text-center mx-auto">
          Loading {totalCommitCount - skipLimit} more commits...
          <div className="flex mx-auto my-6 text-center justify-center">
            <InfiniteLoader loadAnimation={isLoading}></InfiniteLoader>
          </div>
        </div>
      ) : null}
      {!isCommitEmpty && commitLogs.length === 0 && isLoading
        ? fallBackComponent("Loading commits...")
        : null}
    </>
  );
}

export default function CommitLogFileCard({
  repoId,
  commitHash,
  unmountHandler,
}) {
  library.add(far, fas);
  const [commitFiles, setCommitFiles] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    setIsLoading(true);
    const token = axios.CancelToken;
    const source = token.source();

    axios({
      url: globalAPIEndpoint,
      method: "POST",
      cancelToken: source.token,
      data: {
        query: `
            query
            {
              gitCommitFiles(repoId: "${repoId}", commitHash: "${commitHash}"){
                    type
                    fileName
                }
              }
          `,
      },
    })
      .then((res) => {
        setIsLoading(false);
        if (res.data.data && !res.data.err) {
          setCommitFiles([...res.data.data.gitCommitFiles]);
        }
      })
      .catch((err) => {
        console.log(err);
        setIsLoading(false);
      });
  }, [repoId, commitHash]);

  return (
    <div className="w-11/12 p-6 rounded-lg shadow block mx-auto my-6 bg-blue-50">
      <div
        className="font-sans font-light float-right right-0 cursor-pointer mx-auto text-2xl text-blue-400 mb-0"
        style={{ marginTop: "-20px" }}
        onClick={() => {
          setCommitFiles([]);
          unmountHandler();
        }}
      >
        x
      </div>
      {isLoading ? (
        <div className="mx-4 text-2xl font-sans font-light text-gray-600 text-center">
          Fetching changed files...
        </div>
      ) : null}
      {!isLoading && commitFiles ? (
        <div className="mx-4 text-2xl font-sans font-light text-gray-600">{`${commitFiles.length} Files changed`}</div>
      ) : null}
      <div className="block w-3/4 mx-10 my-4">
        {commitFiles &&
          commitFiles.map(({ type, fileName }) => {
            let iconSelector = "";
            let colorSelector = "";
            switch (type) {
              case "M":
                iconSelector = "plus-square";
                colorSelector = "text-yellow-400";
                break;
              case "A":
                iconSelector = "plus-square";
                colorSelector = "text-green-500";
                break;
              case "D":
                iconSelector = "minus-square";
                colorSelector = "text-red-500";
                break;
              default:
                iconSelector = "plus-square";
                colorSelector = "text-gray-500";
                break;
            }

            return (
              <div
                className="flex justify-evenly items-center align-middle my-auto"
                key={fileName + commitHash}
              >
                <div className={`w-1/4 text-2xl ${colorSelector}`}>
                  <FontAwesomeIcon
                    icon={["far", iconSelector]}
                  ></FontAwesomeIcon>
                </div>
                <div
                  className="truncate w-3/4 font-medium text-sm text-gray-600"
                  title={fileName}
                >
                  {fileName}
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}