docs: frigade sponsor docs

Author: gabrieljablonski

docs/src/components/AdsContainerElement/styles.css

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

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

@@ -2,12 +2,29 @@
 import React from 'react'
 import TOC from '@theme-original/TOC'
 import AdsContainerElement from '@site/src/components/AdsContainerElement'
+import LogoFrigade from '@site/static/img/sponsors/frigade.png'
 
 export default function TOCWrapper(props) {
   return (
     <>
       <TOC {...props} />
-      <AdsContainerElement />
+      <div
+        style={{
+          position: 'fixed',
+        }}
+      >
+        <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>
+        <AdsContainerElement />
+      </div>
       {/* <ins
         className="adsbygoogle"
         style={{ display: 'block', position: 'fixed', width: '300px', height: '600px' }}