Studay_Client/src/components/common/button/Button.tsx at 42deb4a498289534147ced63c0a897adb94529ca · Guzzing/Studay_Client · 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
98
99
100
101
import type { ButtonProps } from './ButtonType'
import {
  BUTTON_BG_COLOR,
  BUTTON_BORDER_COLOR,
  BUTTON_HEIGHT,
  BUTTON_RADIUS,
  BUTTON_TEXT_COLOR,
  BUTTON_WIDTH,
  FONT_STYLE
} from './constants'
import cn from '@/libs/utils/cn'
const Button = ({
  className,
  label,
  buttonType,
  fullWidth = false,
  width = 'XLW',
  height = 'MH',
  ...props
}: ButtonProps) => {
  const btnClass = `
  outline-none
  ${
    buttonType === 'Floating'
      ? `${BUTTON_RADIUS['max']} ${
          fullWidth ? 'w-full' : width ? 'w-[50px]' : BUTTON_WIDTH[width]
        } ${height ? '' : BUTTON_HEIGHT[height]} ${'text-1xl'} ${
          BUTTON_TEXT_COLOR['white0']
        } ${BUTTON_BG_COLOR['blue500']}`
      : buttonType === 'Square'
      ? `${BUTTON_RADIUS['min']} ${
          fullWidth ? 'w-full' : width ? 'w-[343px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_TEXT_COLOR['white0']
        } ${BUTTON_BG_COLOR['blue500']}`
      : buttonType === 'Plain-blue'
      ? `${BUTTON_RADIUS['middle']} ${
          fullWidth ? 'w-full' : width ? 'w-[317px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[43px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_BG_COLOR['white0']
        } ${BUTTON_TEXT_COLOR['blue500']} ${BUTTON_BORDER_COLOR['blue500']}`
      : buttonType === 'Plain-disabled'
      ? `${BUTTON_RADIUS['middle']} ${
          fullWidth ? 'w-full' : width ? 'w-[317px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[43px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_BG_COLOR['white0']
        } ${BUTTON_TEXT_COLOR['gray500']} ${BUTTON_BORDER_COLOR['gray500']}`
      : buttonType === 'Plain-Onboarding-disabled'
      ? `${BUTTON_RADIUS['middle']} ${
          fullWidth ? 'w-full' : width ? 'w-[343px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_BG_COLOR['white0']
        } ${BUTTON_TEXT_COLOR['gray500']} ${BUTTON_BORDER_COLOR['gray500']}`
      : buttonType === 'Plain-red'
      ? `${BUTTON_RADIUS['middle']} ${
          fullWidth ? 'w-full' : width ? 'w-[317px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[43px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_BG_COLOR['white0']
        } ${BUTTON_TEXT_COLOR['red600']} ${BUTTON_BORDER_COLOR['red600']}`
      : buttonType === 'Round-blue-500'
      ? `${BUTTON_RADIUS['middle']} ${
          fullWidth ? 'w-full' : width ? 'w-[343px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_BG_COLOR['blue500']
        } ${BUTTON_TEXT_COLOR['white0']}`
      : buttonType === 'Round-blue-700'
      ? `${BUTTON_RADIUS['middle']} ${
          fullWidth ? 'w-full' : width ? 'w-[343px]' : BUTTON_WIDTH[width]
        } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
          BUTTON_BG_COLOR['blue700']
        } ${BUTTON_TEXT_COLOR['white0']}`
      : ''
  }
  ${FONT_STYLE['NSK']}
  ${
    buttonType === 'Plain-blue'
      ? 'hover:bg-blue-500 hover:text-white-0 focus:bg-blue-500 focus:text-white-0 focus:outline-none'
      : ''
  }
  ${
    buttonType === 'Plain-red'
      ? 'hover:bg-red-400 hover:text-white-0 foucs: bg-red-400 focus:text-white-0'
      : ''
  }
  ${
    buttonType === 'Round-blue-500'
      ? 'hover:bg-blue-700 hover:text-white-0 focus:bg-blue-700 focus:text-white-0 focus:outline-none'
      : ''
  }
  `
  return (
    <button
      {...props}
      className={cn(btnClass, className)}
      disabled={buttonType === 'Plain-disabled' ? true : false}>
      {label}
    </button>
  )
}

export default Button