Added YouTube link to Socials component

keystonejs · Sep 24, 2021 · b43317d · b43317d
1 parent a3d6132
commit b43317d
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/docs/components/Socials.tsx b/docs/components/Socials.tsx
@@ -4,14 +4,15 @@ import { jsx } from '@emotion/react';
 import { HTMLAttributes } from 'react';
 
 import { Twitter } from './icons/Twitter';
+import { YouTube } from './icons/YouTube';
 import { Slack } from './icons/Slack';
 
 export function Socials(props: HTMLAttributes<HTMLElement>) {
   return (
     <div
       css={{
         display: 'inline-grid',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: '1fr 1fr 1fr',
         gap: 'var(--space-large)',
         alignItems: 'center',
         marginLeft: 'auto',
@@ -67,6 +68,24 @@ export function Socials(props: HTMLAttributes<HTMLElement>) {
       >
         <Slack css={{ height: '1.5em' }} />
       </a>
+      <a
+        href="https://www.youtube.com/channel/UClWScN0YMgpN7swHVaEPKuQ"
+        target="_blank"
+        rel="noopener noreferrer"
+        css={{
+          display: 'inline-flex',
+          padding: 0,
+          justifyContent: 'center',
+          borderRadius: '100%',
+          color: 'currentColor',
+          transition: 'color 0.3s ease',
+          ':hover': {
+            color: '#fb0202',
+          },
+        }}
+      >
+        <YouTube css={{ height: '2em' }} />
+      </a>
     </div>
   );
 }