refactor: make twg badge visible on smaller screens (#4345)

TheWidlarzGroup · Dec 21, 2024 · 78770d9 · 78770d9
1 parent abc4d76
commit 78770d9
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 57 deletions.
diff --git a/docs/components/TWGBadge/TWGBadge.module.css b/docs/components/TWGBadge/TWGBadge.module.css
@@ -0,0 +1,62 @@
+.extraContainer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.5rem;
+    text-align: center;
+    background-color: #171717;
+    padding: 1rem;
+    gap: 1rem;
+    border-radius: 0.5rem;
+}
+
+.extraText {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-weight: bold;
+    color: #fff;
+}
+
+.extraButton {
+    width: 100%;
+    border: none;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    background-color: #f9d85b;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.extraButton:hover {
+    transform: scale(1.05);
+    background-color: #fff;
+}
+
+:is(html[class~=dark]) .extraContainer {
+    background-color: #87ccef;
+}
+
+:is(html[class~=dark]) .extraText {
+    color: #171717;
+}
+
+:is(html[class~=dark]) .extraButton {
+    background-color: #171717;
+}
+
+
+@media (min-width: 1280px) {
+    .visibleOnLarge {
+        display: inherit;
+    }
+    .visibleOnSmall {
+        display: none;
+    }
+}
+
+@media (max-width: 1279px) {
+    .visibleOnLarge {
+        display: none;
+    }
+    .visibleOnSmall {
+        display: flex;
+    }
+}
diff --git a/docs/components/TWGBadge/TWGBadge.tsx b/docs/components/TWGBadge/TWGBadge.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './TWGBadge.module.css';
+
+interface TWGBadgeProps {
+  visibleOnLarge?: boolean;
+}
+
+const TWGBadge = ({visibleOnLarge}: TWGBadgeProps) => {
+  const visibilityClass = visibleOnLarge
+    ? styles.visibleOnLarge
+    : styles.visibleOnSmall;
+
+  return (
+    <div className={[styles.extraContainer, visibilityClass].join(' ')}>
+      <span className={styles.extraText}>We are TheWidlarzGroup</span>
+      <a
+        target="_blank"
+        href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs#Contact"
+        className={styles.extraButton}
+        rel="noreferrer">
+        Premium support →
+      </a>
+    </div>
+  );
+};
+
+export default TWGBadge;
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
@@ -22,5 +22,14 @@
     "newWindow": true,
     "href": "https://github.com/TheWidlarzGroup/react-native-video/tree/master/examples"
   },
-  "projects": "Useful projects"
-}
+  "projects": "Useful projects",
+  "separator_enterprise": {
+    "type": "separator",
+    "title": ""
+  },
+  "enterprise_support": {
+    "title": "Enterprise Support",
+    "newWindow": true,
+    "href": "https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs#Contact"
+  }
+}
diff --git a/docs/theme.config.jsx b/docs/theme.config.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {GoogleAnalytics} from '@next/third-parties/google';
+import TWGBadge from './components/TWGBadge/TWGBadge';
 
 export default {
   head: (
@@ -45,68 +46,22 @@ export default {
   },
   docsRepositoryBase:
     'https://github.com/TheWidlarzGroup/react-native-video/tree/master/docs/',
+  main: ({children}) => (
+    <>
+      {children}
+      <TWGBadge visibleOnLarge={false} />
+    </>
+  ),
+  toc: {
+    extraContent: <TWGBadge visibleOnLarge={true} />,
+  },
   footer: {
     text: (
       <span>
         Built with ❤️ by <strong>React Native Community</strong>
       </span>
     ),
   },
-  toc: {
-    extraContent: (
-      <>
-        <style>{`
-        :is(html[class~=dark]) .extra-container {
-          background-color: #87ccef;
-        }
-        :is(html[class~=dark]) .extra-text {
-          color: #171717;
-        }
-        :is(html[class~=dark]) .extra-button {
-          background-color: #171717;
-        }
-        .extra-container {
-          display: flex;
-          flex-direction: column;
-          margin-top: 0.5rem;
-          text-align: center;
-          background-color: #171717;
-          padding: 1rem;
-          gap: 1rem;
-          border-radius: 0.5rem;
-        }
-        .extra-text {
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-          font-weight: bold;
-          color: #fff;
-        }
-        .extra-button {
-          width: 100%;
-          border: none;
-          padding: 0.5rem 1rem;
-          font-weight: 500;
-          background-color: #f9d85b;
-          transition: transform 0.3s ease, background-color 0.3s ease;
-        }
-        .extra-button:hover {
-          transform: scale(1.05);
-          background-color: #fff;
-        }
-      `}</style>
-        <div className="extra-container">
-          <span className="extra-text">We are TheWidlarzGroup</span>
-          <a
-            target="_blank"
-            href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs#Contact"
-            className="extra-button"
-            rel="noreferrer">
-            Premium support →
-          </a>
-        </div>
-      </>
-    ),
-  },
 
   useNextSeoProps() {
     return {