Function PlusUserBadge

packages/shared/src/components/PlusUserBadge.tsx:28–89

({
  user,
  tooltip = true,
  size = IconSize.Size16,
}: Props)

};

export const PlusUserBadge = ({
  user,
  tooltip = true,
  size = IconSize.Size16,
}: Props): ReactElement | null => {
  const { isPlus, logSubscriptionEvent } = usePlusSubscription();
  const { value: isApiLanding } = useConditionalFeature({
    feature: featurePlusApiLanding,
    shouldEvaluate: !isPlus,
  });
  const plusCta = isApiLanding ? 'Get API Access' : 'Level Up with Plus';

  if (!user.isPlus) {
    return null;
  }

  return (
    <ConditionalWrapper
      condition={tooltip}
      wrapper={(child) => (
        <SimpleTooltip
          interactive
          content={
            <>
              <DateFormat
                prefix="Plus member since "
                date={user.plusMemberSince}
                type={TimeFormatType.PlusMember}
              />
              {!isPlus && (
                <Link passHref href={plusUrl}>
                  <Typography
                    tag={TypographyTag.Link}
                    color={TypographyColor.Link}
                    onClick={() => {
                      logSubscriptionEvent({
                        event_name: LogEvent.UpgradeSubscription,
                        target_id: TargetId.PlusBadge,
                      });
                    }}
                  >
                    {plusCta}!
                  </Typography>
                </Link>
              )}
            </>
          }
          placement="top"
          container={{
            className: 'text-center flex-col',
          }}
        >
          {child as ReactElement}
        </SimpleTooltip>
      )}
    >
      <div className="flex items-center">
        <PlusUser withText={false} iconSize={size} />