index.tsx

/* eslint-disable import/no-unresolved */
import React from 'react'
// @ts-ignore
import LogoFrigade from '@site/static/img/sponsors/frigade.png'
import './styles.css'

declare global {
  interface Window {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    dataLayer?: any
  }
}

const SPONSORS = {
  frigade: {
    logo: LogoFrigade,
    title: 'Frigade',
    href: 'https://frigade.com/',
  },
}

interface BannerSponsorProps {
  sponsorKey: keyof typeof SPONSORS
  tier: 'gold' | 'silver'
}

const BannerSponsor = ({ sponsorKey, tier }: BannerSponsorProps) => {
  const sponsor = SPONSORS[sponsorKey]

  const onClickSponsorBannerEventHandler = () => {
    if (typeof window !== 'undefined') {
      window.dataLayer = window.dataLayer || []

      window.dataLayer.push({
        event: `click_sponsor_banner`,
        place: 'sidebar',
        sponsorKey,
        sponsorTitle: sponsor.title,
      })
    }

    return true
  }

  return (
    <div className={`sponsor-banner sponsor-banner-${tier}`}>
      <a
        href={`${sponsor.href}?source=react-tooltip`}
        title={sponsor.title}
        target="_blank"
        rel="noreferrer"
        onClick={onClickSponsorBannerEventHandler}
      >
        <img src={sponsor.logo} alt={sponsor.title} />
      </a>
    </div>
  )
}

export default BannerSponsor