refactor: add new components to wrapper the new code of this PR

Author: danielbarion

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/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/theme/TOC/index.js

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