tracker/frontend/src/TopBanner.js at queue-json-encoding · LearningAzure2020/tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React from 'react'
import { LocaleSwitcher } from './LocaleSwitcher'
import { useLingui } from '@lingui/react'
import { useUserVar } from './UserState'
import { t, Trans } from '@lingui/macro'
import sigEn from './images/goc-header-logo-en.svg'
import sigFr from './images/goc-header-logo-fr.svg'
import { Box, Flex, Image, useToast } from '@chakra-ui/core'
import { Layout } from './Layout'
import { TrackerButton } from './TrackerButton'
import { Link as RouteLink } from 'react-router-dom'

export const TopBanner = (props) => {
  const { i18n } = useLingui()
  const { isLoggedIn, logout } = useUserVar()
  const toast = useToast()

  return (
    <Flex bg="primary" borderBottom="3px solid" borderBottomColor="accent">
      <Layout>
        <Flex
          maxW={{ sm: 540, md: 768, lg: 960, xl: 1200 }}
          mx="auto"
          w="100%"
          align="center"
          fontFamily="body"
          {...props}
        >
          <Box py="4" width={{ base: 272, md: 360 }}>
            <Image
              src={i18n.locale === 'en' ? sigEn : sigFr}
              pr={16}
              py={2}
              minHeight="41px"
              alt={'Symbol of the Government of Canada'}
            />
          </Box>

          <Box ml="auto" />

          {isLoggedIn() ? (
            <TrackerButton
              as={RouteLink}
              to="/"
              variant="primary hover"
              mx={1}
              px={3}
              display={{ base: 'none', md: 'inline' }}
              onClick={() => {
                logout()
                toast({
                  title: t`Sign Out.`,
                  description: t`You have successfully been signed out.`,
                  status: 'success',
                  duration: 9000,
                  isClosable: true,
                  position: 'top-left',
                })
              }}
            >
              <Trans>Sign Out</Trans>
            </TrackerButton>
          ) : (
            <TrackerButton
              as={RouteLink}
              variant="primary white"
              to="/sign-in"
              mx={1}
              px={3}
              display={{ base: 'none', md: 'inline' }}
            >
              <Trans>Sign In</Trans>
            </TrackerButton>
          )}

          {!isLoggedIn() && (
            <TrackerButton
              as={RouteLink}
              variant="primary hover"
              to="/create-user"
              mx={1}
              px={3}
              display={{ base: 'none', md: 'inline' }}
            >
              <Trans>Create Account</Trans>
            </TrackerButton>
          )}

          <Box py={4}>
            <LocaleSwitcher />
          </Box>
        </Flex>
      </Layout>
    </Flex>
  )
}