computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
1.1 KiB
34 lines
1.1 KiB
import { Flex, Link, Text } from '@chakra-ui/react'; |
|
import YouTubeLogo from '../components/icons/youtube.svg'; |
|
import siteConfig from '../content/site.json'; |
|
import { event } from '../lib/gtag'; |
|
|
|
export function StickyBanner() { |
|
return ( |
|
<Flex as={Link} |
|
href={siteConfig.url.youtube} |
|
bg={'yellow.300'} |
|
color='gray.900' |
|
alignItems='center' |
|
position='fixed' |
|
left={0} |
|
right={0} |
|
zIndex={999} |
|
justifyContent='center' |
|
py='8px' |
|
_hover={{ textDecoration: 'none', bg: 'yellow.400' }} |
|
target='_blank' |
|
onClick={() => event({ |
|
category: 'Subscription', |
|
action: 'Clicked the YouTube banner', |
|
label: 'Sticky YouTube banner on Top' |
|
})} |
|
> |
|
<YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} /> |
|
<Text as='span' fontWeight={500} fontSize='14px'> |
|
<Text as='span'>We now have a YouTube Channel. <Text as='span' d={['none', 'inline']}>Subscribe for the video |
|
content.</Text></Text> |
|
</Text> |
|
</Flex> |
|
); |
|
}
|
|
|