tracker/frontend/src/OrganizationCard.js at update-cloudbuild · 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
97
import React from 'react'
import {
  Text,
  ListItem,
  Progress,
  PseudoBox,
  Box,
  Stack,
  Divider,
} from '@chakra-ui/core'
import { useRouteMatch, useHistory } from 'react-router-dom'
import { string, number } from 'prop-types'
import { Trans } from '@lingui/macro'

export function OrganizationCard({
  name,
  acronym,
  slug,
  domainCount,
  ...rest
}) {
  const { path, _url } = useRouteMatch()
  const history = useHistory()
  const webValue = Math.floor(Math.random() * 10) * 10 + 10
  const emailValue = Math.floor(Math.random() * 10) * 10 + 10

  return (
    <ListItem {...rest}>
      <PseudoBox
        width="100%"
        display={{ md: 'flex' }}
        alignItems="center"
        onClick={() => {
          history.push(`${path}/${slug}`)
        }}
        _hover={{ bg: 'gray.100' }}
        p="8"
        mx="auto"
        tabIndex={0}
      >
        <Box flexShrink="0" minW="50%" mb={['2', '0']}>
          <Stack isInline align="center">
            <Text mt="1" fontSize={['lg', 'md']} fontWeight="semibold" as="u">
              {name}
            </Text>
            <Text mt="1" fontSize="md" fontWeight="semibold">
              ({acronym})
            </Text>
          </Stack>
        </Box>
        <Divider orientation="vertical" />
        <Box
          flexShrink="0"
          minW="10%"
          ml={{ md: 2 }}
          mr={{ md: 2 }}
          mb={['2', '0']}
        >
          <Stack isInline align="center">
            <Text fontWeight="semibold">
              <Trans>Services: {domainCount}</Trans>
            </Text>
          </Stack>
        </Box>
        <Divider orientation="vertical" />
        <Box
          flexShrink="0"
          minW="15%"
          ml={{ md: 2 }}
          mr={{ md: 2 }}
          mb={['2', '0']}
        >
          <Text fontWeight="bold">
            <Trans>Web Configuration</Trans>
          </Text>
          <Text>{webValue}%</Text>
          <Progress value={webValue} bg="gray.300" w={['50%', '100%']} />
        </Box>
        <Divider orientation="vertical" />
        <Box flexShrink="0" ml={{ md: 2 }} mr={{ md: 2 }}>
          <Text fontWeight="bold">
            <Trans>Email Configuration</Trans>
          </Text>
          <Text>{emailValue}%</Text>
          <Progress value={emailValue} bg="gray.300" w={['50%', '100%']} />
        </Box>
      </PseudoBox>
    </ListItem>
  )
}

OrganizationCard.propTypes = {
  name: string.isRequired,
  acronym: string.isRequired,
  slug: string.isRequired,
  domainCount: number.isRequired,
}