Function DevCard

packages/shared/src/components/profile/devcard/DevCard.tsx:30–219

({
  type = DevCardType.Vertical,
  data,
  isInteractive = true,
}: DevCardProps)

}

export function DevCard({
  type = DevCardType.Vertical,
  data,
  isInteractive = true,
}: DevCardProps): ReactElement | null {
  const { devcard, isLoading, coverImage } = data ?? {};

  if (isLoading || !devcard) {
    return null;
  }

  if (type.toLowerCase() === DevCardType.Twitter.toLowerCase()) {
    return <DevCardTwitterCover {...data} />;
  }

  const { theme, user } = devcard;

  if (!user || !theme) {
    return null;
  }

  const {
    articlesRead = 0,
    tags = [],
    sources = [],
    showBorder = false,
    streak,
  } = devcard;
  const isHorizontal = type === DevCardType.Horizontal;
  const isVertical = type === DevCardType.Vertical;
  const isIron = checkLowercaseEquality(theme, DevCardTheme.Iron);
  const isDefault = checkLowercaseEquality(theme, DevCardTheme.Default);

  const footer = (
    <DevCardFooter
      tags={tags}
      sources={sources}
      type={type}
      theme={theme}
      elementsClickable={isInteractive}
    />
  );

  return (
    <DevCardContainer
      theme={theme}
      className={classNames(!isHorizontal && 'w-[20.25rem] flex-col')}
    >
      <ConditionalWrapper
        condition={isHorizontal}
        wrapper={(component) => (
          <RoundedContainer
            className="flex w-[37.75rem] flex-row-reverse pl-2"
            style={{ boxShadow: devCardBoxShadow }}
          >
            {component}
          </RoundedContainer>
        )}