Merge pull request #1087 from ReactTooltip/docs/frigade-sponsor

Frigade sponsorship

Author: danielbarion

README.md

@@ -123,6 +123,14 @@ Please check our [troubleshooting section](https://react-tooltip.com/docs/troubl
 If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
 If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
 
+## Sponsors
+
+<a href="https://frigade.com/?source=react-tooltip">
+  <img alt="Frigade" style="height: 250px" src="docs/static/img/sponsors/frigade.png" />
+</a>
+
+React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.
+
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

docs/src/components/AdsContainer/index.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react'
+import AdsContainerElement from '@site/src/components/AdsContainerElement'
+import BannerFrigade from '@site/src/components/BannerFrigade'
+import './styles.css'
+
+const AdsContainer = () => {
+  return (
+    <div className="fixed">
+      <BannerFrigade />
+      <AdsContainerElement />
+    </div>
+  )
+}
+
+export default AdsContainer

docs/src/components/AdsContainer/styles.css

@@ -0,0 +1,3 @@
+.fixed {
+  position: fixed;
+}

docs/src/components/AdsContainerElement/styles.css

@@ -1,5 +1,4 @@
 .carbon-ads {
-  position: fixed;
   display: grid;
   row-gap: 16px;
 }

docs/src/components/BannerFrigade/index.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react'
+// @ts-ignore
+import LogoFrigade from '@site/static/img/sponsors/frigade.png'
+
+const BannerFrigade = () => {
+  return (
+    <div className="sponsor-frigade">
+      <a
+        href="https://frigade.com/?source=react-tooltip"
+        title="Frigade"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <img src={LogoFrigade} alt="Frigade" />
+      </a>
+    </div>
+  )
+}
+
+export default BannerFrigade

docs/src/components/HomepageSponsored/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 /* eslint-disable import/no-unresolved */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable global-require */
@@ -7,7 +8,9 @@ import styles from './styles.module.css'
 
 type FeatureItem = {
   title: string
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>
+  Svg?: React.ComponentType<React.ComponentProps<'svg'>>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/no-unused-prop-types
+  src?: any
   link: string
 }
 
@@ -24,6 +27,14 @@ const FeatureList: FeatureItem[] = [
   },
 ]
 
+const SponsorList: FeatureItem[] = [
+  {
+    title: 'Frigade',
+    src: require('@site/static/img/sponsors/frigade.png').default,
+    link: 'https://frigade.com/?source=react-tooltip',
+  },
+]
+
 function Feature({ title, Svg, link }: FeatureItem) {
   return (
     <div className={clsx('col col--6')}>
@@ -39,6 +50,21 @@ function Feature({ title, Svg, link }: FeatureItem) {
 export default function HomepageSponsored(): JSX.Element {
   return (
     <section className={styles.features}>
+      <div className="container">
+        <h3 className={styles.sponsoredTitle}>Sponsored by</h3>
+        <div className="row">
+          {SponsorList.map(({ link, title, src }, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={idx} className={clsx('col col--12')}>
+              <div className="text--center">
+                <a href={link} title={title} target="_blank" rel="noreferrer">
+                  <img src={src} alt={title} width={480} />
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
       <div className="container">
         <h3 className={styles.sponsoredTitle}>Powered by</h3>
         <div className="row">

docs/src/theme/TOC/index.js

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react'
 import TOC from '@theme-original/TOC'
-import AdsContainerElement from '@site/src/components/AdsContainerElement'
+import AdsContainer from '@site/src/components/AdsContainer'
 
 export default function TOCWrapper(props) {
   return (
     <>
       <TOC {...props} />
-      <AdsContainerElement />
+      <AdsContainer />
       {/* <ins
         className="adsbygoogle"
         style={{ display: 'block', position: 'fixed', width: '300px', height: '600px' }}