function ShowcaseCardAzureTag()

in website/src/components/gallery/ShowcaseCardPanel/index.tsx [533:629]

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

function ShowcaseCardAzureTag({
  tags,
  colorMode,
}: {
  tags: TagType[];
  colorMode: string;
}) {
  const tagObjects = tags.map((tag) => ({ tag, ...Tags[tag] }));

  // Keep same order for all tags
  const tagObjectsSorted = sortBy(tagObjects, (tagObject) =>
    TagList.indexOf(tagObject.tag)
  );

  return tagObjectsSorted.map((tagObject, index) => {
    const azureService = tagObject.label.includes("Azure");

    return azureService ? (
      <div
        key={index}
        style={{
          display: "flex",
          padding: "5px 0",
        }}
      >
        <div
          className={styles.squareColor}
          style={{
            height: "40px",
            width: "40px",
            float: "left",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <img
            src={
              colorMode != "dark" || tagObject.darkModeAzureIcon == null
                ? useBaseUrl(tagObject.azureIcon)
                : useBaseUrl(tagObject.darkModeAzureIcon)
            }
            alt="Azure Service Icon"
            height={20}
          />
        </div>
        <div style={{ float: "right", height: "40px", paddingLeft: "20px" }}>
          <div
            className={styles.textColor}
            style={{
              fontSize: "14px",
            }}
          >
            {tagObject.label}
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <div
              style={{
                color: "#707070",
                fontSize: "12px",
                fontWeight: "400",
              }}
            >
              Azure Service
            </div>
            <div
              style={{
                color: "#707070",
                fontSize: "12px",
                fontWeight: "400",
                padding: "0 6px",
              }}
            >
              •
            </div>
            <a
              href={tagObject.url}
              target="_blank"
              style={{
                fontSize: "12px",
                fontWeight: "400",
              }}
              className={styles.color}
            >
              Learn More
            </a>
          </div>
        </div>
      </div>
    ) : null;
  });
}