import { Badge, Link, Text } from '@chakra-ui/react'; import siteConfig from '../../content/site.json'; import { event } from '../../lib/gtag'; import React from 'react'; export function NewAlertBanner() { return ( <Text _hover={{ textDecoration: 'none', color: 'blue.700', '& .new-badge': { bg: 'blue.700' }, }} as={Link} href={siteConfig.url.youtube} d="block" target="_blank" color="red.700" fontSize="sm" mb="10px" fontWeight={500} onClick={() => event({ category: 'Subscription', action: 'Clicked the YouTube banner', label: 'YouTube Alert on Roadmap', }) } > <Badge transition={'all 300ms'} className="new-badge" mr="7px" colorScheme="red" variant="solid" > New </Badge> <Text textDecoration="underline" as="span" d={['none', 'inline']}> Roadmap topics to be covered on our YouTube Channel </Text> <Text textDecoration="underline" as="span" d={['inline', 'none']}> Topic videos being made on YouTube </Text> <Text as="span" ml="5px"> » </Text> </Text> ); }