export default function ShowcaseMultipleAuthors()

in website/src/components/gallery/ShowcaseMultipleAuthors/index.tsx [114:183]

• 67 lines of code
• 5 McCabe index (conditional complexity)

export default function ShowcaseMultipleAuthors({
  user,
  cardPanel,
}: {
  user: User;
  cardPanel: boolean;
}) {
  const { colorMode } = useColorMode();
  const authors = user.author;
  const websites = user.authorUrl;
  let i = 0;

  if (authors.includes(", ")) {
    var multiWebsites = websites.split(", ");
    var multiAuthors = authors.split(", ");

    if (multiWebsites.length != multiAuthors.length) {
      throw new Error(
        "The number of multiple authors and websites are not equal."
      );
    }
    return multiWebsites.map((value, index) => {
      return ShowcaseMultipleWebsites(
        index,
        multiAuthors[index],
        multiWebsites[index],
        multiWebsites.length,
        i++,
        cardPanel,
        colorMode
      );
    });
  }

  return cardPanel ? (
    <FluentUILink
      className={styles.cardAuthorPanel}
      href={websites}
      target="_blank"
      style={{
        display: "flex",
        alignItems: "center",
        columnGap: "5px",
        fontSize: "14px",
        fontWeight: "400",
        flexShrink: 0,
      }}
    >
      {authors}
      {colorMode != "dark" ? (
        <img src={useBaseUrl("/img/redirect.svg")} alt="Redirect" height={13} />
      ) : (
        <img
          src={useBaseUrl("/img/redirectDark.svg")}
          alt="Redirect"
          height={13}
        />
      )}
    </FluentUILink>
  ) : (
    <FluentUILink
      className={styles.cardAuthor}
      href={websites}
      target="_blank"
      style={{ fontSize: "12px", flexShrink: 0 }}
    >
      {authors}
    </FluentUILink>
  );
}