Function PlusGrid

packages/shared/src/components/cards/plus/PlusGrid.tsx:42–124

({ flags, campaignId }: MarketingCta)

];

const PlusGrid = ({ flags, campaignId }: MarketingCta) => {
  const { logEvent } = useLogContext();
  const { clearMarketingCta } = useBoot();
  const isApiLanding = useFeature(featurePlusApiLanding);

  if (!flags) {
    return null;
  }
  const { title, description, ctaText, ctaUrl } = flags;
  const ctaColor = isApiLanding ? ButtonColor.Bacon : ButtonColor.Avocado;

  const handleClose = () => {
    logEvent({
      event_name: LogEvent.MarketingCtaDismiss,
      target_type: TargetType.PlusEntryCard,
      target_id: campaignId,
    });
    clearMarketingCta(campaignId);
  };

  const handleClick = () => {
    logEvent({
      event_name: LogEvent.ClickPlusFeature,
      target_type: TargetType.PlusEntryCard,
      target_id: campaignId,
    });
    clearMarketingCta(campaignId);
  };

  return (
    <div className="plus-entry-gradient relative overflow-hidden rounded-b-16 p-4 pb-6">
      <div className="flex flex-col gap-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="rounded-8 bg-action-plus-float p-1">
              <DevPlusIcon className="fill-action-plus-default" />
            </div>
            <Typography
              tag={TypographyTag.H3}
              type={TypographyType.Title3}
              bold
            >
              {title}
            </Typography>
          </div>
          <CloseButton onClick={handleClose} />
        </div>

        <div className="flex flex-col gap-4">
          <Typography
            tag={TypographyTag.P}
            type={TypographyType.Callout}
            color={TypographyColor.Secondary}
          >
            {description}
          </Typography>

          <div className="flex w-full flex-col gap-1">