Function AdRow

packages/shared/src/features/daily/CoverGrid.tsx:82–159

({ ad }: { ad: Ad })

);

const AdRow = ({ ad }: { ad: Ad }): ReactElement => {
  const { logEvent } = useLogContext();
  const adImprovementsV3 = useFeature(adImprovementsV3Feature);
  const faviconSrc = getAdFaviconImageLink({ ad, adImprovementsV3, size: 24 });
  const adLabel = useScrambler('Ad');
  const impressionRef = useLogImpression(
    {
      type: FeedItemType.Ad,
      ad,
      index: AD_SLOT_INDEX,
      updatedAt: 0,
      dataUpdatedAt: 0,
    },
    AD_SLOT_INDEX,
    1,
    0,
    AD_SLOT_INDEX,
    DAILY_FEED_NAME,
    undefined,
    undefined,
    Origin.DailyPage,
  );

  return (
    <li ref={impressionRef}>
      <a
        href={ad.link}
        target="_blank"
        rel="noopener noreferrer sponsored"
        title={ad.description}
        {...combinedClicks(() =>
          logEvent(
            adLogEvent(LogEvent.Click, ad, {
              columns: 1,
              column: 0,
              row: AD_SLOT_INDEX,
              ...dailyFeedExtra(),
            }),
          ),
        )}
        className="group flex w-full items-center gap-4 px-4 py-4 text-left transition-colors hover:bg-surface-float tablet:px-5"
      >
        <Typography
          tag={TypographyTag.H3}
          type={TypographyType.Body}
          bold
          color={TypographyColor.Primary}
          className="min-w-0 max-w-3xl flex-1 !leading-snug"
        >
          {ad.description}
        </Typography>
        <span className="ml-auto flex shrink-0 items-center gap-2">
          <Typography
            type={TypographyType.Caption1}
            color={TypographyColor.Quaternary}
            suppressHydrationWarning
          >
            {adLabel}