初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

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
'use client'
 
import classNames from '@/utils/classnames'
 
export type IndicatorProps = {
  color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
  className?: string
}
 
export type ColorMap = {
  green: string
  orange: string
  red: string
  blue: string
  yellow: string
  gray: string
}
 
const BACKGROUND_MAP: ColorMap = {
  green: 'bg-components-badge-status-light-success-bg',
  orange: 'bg-components-badge-status-light-warning-bg',
  red: 'bg-components-badge-status-light-error-bg',
  blue: 'bg-components-badge-status-light-normal-bg',
  yellow: 'bg-components-badge-status-light-warning-bg',
  gray: 'bg-components-badge-status-light-disabled-bg',
}
const BORDER_MAP: ColorMap = {
  green: 'border-components-badge-status-light-success-border-inner',
  orange: 'border-components-badge-status-light-warning-border-inner',
  red: 'border-components-badge-status-light-error-border-inner',
  blue: 'border-components-badge-status-light-normal-border-inner',
  yellow: 'border-components-badge-status-light-warning-border-inner',
  gray: 'border-components-badge-status-light-disabled-border-inner',
}
const SHADOW_MAP: ColorMap = {
  green: 'shadow-status-indicator-green-shadow',
  orange: 'shadow-status-indicator-warning-shadow',
  red: 'shadow-status-indicator-red-shadow',
  blue: 'shadow-status-indicator-blue-shadow',
  yellow: 'shadow-status-indicator-warning-shadow',
  gray: 'shadow-status-indicator-gray-shadow',
}
 
export default function Indicator({
  color = 'green',
  className = '',
}: IndicatorProps) {
  return (
    <div className={classNames(
      'w-2 h-2 border border-solid rounded-[3px]',
      BACKGROUND_MAP[color],
      BORDER_MAP[color],
      SHADOW_MAP[color],
      className,
    )}>
 
    </div>
  )
}