diff --git a/docs/components/TWGBadge/TWGBadge.module.css b/docs/components/TWGBadge/TWGBadge.module.css new file mode 100644 index 0000000000..a06f66be6f --- /dev/null +++ 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 new file mode 100644 index 0000000000..4426fd9d7a --- /dev/null +++ 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 ( +
+ We are TheWidlarzGroup + + Premium support → + +
+ ); +}; + +export default TWGBadge; diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json index 3e330ad377..16388b23ca 100644 --- 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" -} \ No newline at end of file + "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 index a9a0f58bd6..243cd6d327 100644 --- 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,6 +46,15 @@ export default { }, docsRepositoryBase: 'https://github.com/TheWidlarzGroup/react-native-video/tree/master/docs/', + main: ({children}) => ( + <> + {children} + + + ), + toc: { + extraContent: , + }, footer: { text: ( @@ -52,61 +62,6 @@ export default { ), }, - toc: { - extraContent: ( - <> - -
- We are TheWidlarzGroup - - Premium support → - -
- - ), - }, useNextSeoProps() { return {