From 0f713cbfd8f6fbe87809a70d98ce7da34bd3b7bb Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 5 Sep 2021 21:58:44 +0200
Subject: [PATCH] Add sticky banner for youtube

---
 components/icons/youtube.svg |  3 +++
 components/sticky-banner.tsx | 24 ++++++++++++++++++++++++
 pages/_app.tsx               |  2 ++
 3 files changed, 29 insertions(+)
 create mode 100644 components/icons/youtube.svg
 create mode 100644 components/sticky-banner.tsx

diff --git a/components/icons/youtube.svg b/components/icons/youtube.svg
new file mode 100644
index 000000000..b37541c96
--- /dev/null
+++ b/components/icons/youtube.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill='currentColor'>
+    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+</svg>
diff --git a/components/sticky-banner.tsx b/components/sticky-banner.tsx
new file mode 100644
index 000000000..6b384552d
--- /dev/null
+++ b/components/sticky-banner.tsx
@@ -0,0 +1,24 @@
+import { Flex, Link, Text } from '@chakra-ui/react';
+import YouTubeLogo from '../components/icons/youtube.svg';
+import siteConfig from '../content/site.json';
+
+export function StickyBanner() {
+  return (
+    <Flex as={Link}
+          href={siteConfig.url.youtube}
+          bg={'teal.900'}
+          color='gray.300'
+          alignItems='center'
+          justifyContent='center'
+          py='7px'
+          _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
+          target='_blank'
+    >
+      <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
+      <Text as='span' fontWeight={500} fontSize='14px'>
+        <Text as='span' d={['none', 'block']}>Subscribe to our YouTube channel for the video content.</Text>
+        <Text as='span' d={['block', 'none']}>We now have a YouTube Channel.</Text>
+      </Text>
+    </Flex>
+  );
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index a289c167e..855536376 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,7 @@ import 'prism-themes/themes/prism-shades-of-purple.css';
 import { roadmapTheme } from '../styles/theme';
 import { firePageView } from '../lib/gtag';
 import '../styles/carbon.css';
+import { StickyBanner } from '../components/sticky-banner';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -13,6 +14,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ChakraProvider theme={roadmapTheme}>
+      <StickyBanner />
       <Component {...pageProps} />
     </ChakraProvider>
   );