SupremeTechnopriest/react-idle-timer

import { Box, BoxProps, chakra, Flex, Heading, Text, Icon, IconProps } from '@chakra-ui/react'
import { useTranslation } from 'next-i18next'
import { Container } from '@components/Container'
import config from '@configs/site.config'

const DiscordIcon = (props: IconProps) => (
  <Icon viewBox='0 0 48 48' {...props}>
    <g id='surface1615260'>
      <path
        style={{
          stroke: 'none',
          fillRule: 'nonzero',
          fill: 'rgb(100%,100%,100%)',
          fillOpacity: 1
        }}
        d='M 39.246094 10.175781 C 36.445312 8.890625 33.4375 7.941406 30.292969 7.398438 C 30.234375 7.390625 30.179688 7.414062 30.148438 7.46875 C 29.761719 8.15625 29.332031 9.050781 29.03125 9.757812 C 25.652344 9.253906 22.285156 9.253906 18.972656 9.757812 C 18.675781 9.035156 18.230469 8.15625 17.839844 7.46875 C 17.8125 7.414062 17.753906 7.390625 17.695312 7.398438 C 14.554688 7.941406 11.546875 8.886719 8.742188 10.175781 C 8.71875 10.1875 8.695312 10.203125 8.683594 10.226562 C 2.976562 18.75 1.414062 27.0625 2.183594 35.273438 C 2.183594 35.3125 2.207031 35.351562 2.238281 35.375 C 6.003906 38.140625 9.648438 39.816406 13.226562 40.929688 C 13.28125 40.945312 13.34375 40.925781 13.378906 40.878906 C 14.226562 39.722656 14.980469 38.503906 15.628906 37.222656 C 15.664062 37.148438 15.628906 37.058594 15.550781 37.027344 C 14.355469 36.574219 13.214844 36.019531 12.121094 35.390625 C 12.03125 35.339844 12.027344 35.21875 12.105469 35.15625 C 12.335938 34.984375 12.566406 34.804688 12.789062 34.625 C 12.828125 34.589844 12.882812 34.585938 12.929688 34.605469 C 20.132812 37.894531 27.925781 37.894531 35.042969 34.605469 C 35.089844 34.582031 35.144531 34.589844 35.1875 34.621094 C 35.40625 34.804688 35.636719 34.984375 35.871094 35.15625 C 35.949219 35.21875 35.945312 35.339844 35.859375 35.390625 C 34.761719 36.03125 33.621094 36.574219 32.425781 37.027344 C 32.347656 37.054688 32.3125 37.144531 32.347656 37.222656 C 33.011719 38.503906 33.765625 39.71875 34.59375 40.875 C 34.628906 40.925781 34.691406 40.945312 34.75 40.929688 C 38.34375 39.816406 41.988281 38.136719 45.753906 35.375 C 45.785156 35.351562 45.808594 35.3125 45.808594 35.273438 C 46.726562 25.78125 44.273438 17.539062 39.304688 10.230469 C 39.292969 10.203125 39.273438 10.1875 39.246094 10.175781 Z M 16.703125 30.273438 C 14.535156 30.273438 12.75 28.28125 12.75 25.839844 C 12.75 23.394531 14.5 21.402344 16.703125 21.402344 C 18.921875 21.402344 20.691406 23.410156 20.65625 25.839844 C 20.65625 28.28125 18.90625 30.273438 16.703125 30.273438 Z M 31.324219 30.273438 C 29.15625 30.273438 27.371094 28.28125 27.371094 25.839844 C 27.371094 23.394531 29.121094 21.402344 31.324219 21.402344 C 33.542969 21.402344 35.3125 23.410156 35.277344 25.839844 C 35.277344 28.28125 33.542969 30.273438 31.324219 30.273438 Z M 31.324219 30.273438 '
      />
    </g>
  </Icon>
)

export function DiscordBar (props: BoxProps) {
  const { t } = useTranslation('common')
  return (
    <Box bg='#5865F2' {...props}>
      <Container py='8'>
        <Flex
          direction={{ base: 'column', md: 'row' }}
          align='center'
          justify='space-between'
        >
          <Flex color='white'>
            <Flex
              alignItems='center'
              justifyContent='center'
              fontSize='48px'
              mr='5'
            >
              <DiscordIcon />
            </Flex>
            <Box>
              <Heading size='md' lineHeight='1.2' mb='1'>
                {t('discordBar.heading')}
              </Heading>
              <Text opacity={0.7}>
                {t('discordBar.description')}
              </Text>
            </Box>
          </Flex>
          <chakra.button
            width={{ base: '100%', md: 'auto' }}
            mt={{ base: '6', md: 0 }}
            color='blue.800'
            as='a'
            justifyContent='center'
            display='inline-flex'
            alignItems='center'
            href={config.discord.url}
            rel='noopener'
            target='_blank'
            fontWeight='bold'
            shadow='md'
            bg='white'
            px='24px'
            h='56px'
            rounded='lg'
            fontSize='md'
          >
            {t('discordBar.join')}
          </chakra.button>
        </Flex>
      </Container>
    </Box>
  )
}