tracker/frontend/src/TrackerButton.js at result-processor-pubsub · 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
import React from 'react'
import { PseudoBox, Stack } from '@chakra-ui/core'
import { string, any } from 'prop-types'

export function TrackerButton({ variant, children, ...props }) {
  let color = 'black'
  let bg = 'gray.100'
  let hoverColor = 'gray.200'
  let borderColor = null
  let borderWidth = null

  if (variant === 'primary') {
    color = 'gray.50'
    bg = 'primary'
    hoverColor = 'blue.600'
  } else if (variant === 'outline') {
    color = 'primary'
    bg = 'transparent'
    borderColor = 'primary'
    borderWidth = '1px'
    hoverColor = 'blue.50'
  } else if (variant === 'danger') {
    color = 'gray.50'
    bg = 'red.600'
    hoverColor = 'red.700'
  }

  return (
    <PseudoBox
      as="button"
      fontWeight="semibold"
      rounded="md"
      transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
      overflow="hidden"
      px="4"
      py="2"
      color={color}
      bg={bg}
      _hover={{ bg: hoverColor }}
      _active={{
        boxShadow: 'outline',
      }}
      _focus={{
        outline: 'none',
      }}
      borderColor={borderColor}
      borderWidth={borderWidth}
      {...props}
    >
      <Stack isInline align="center" justifyContent="center">
        {children}
      </Stack>
    </PseudoBox>
  )
}

TrackerButton.propTypes = {
  variant: string,
  children: any,
}