mirror of
https://github.com/langgenius/dify.git
synced 2025-12-06 07:43:33 +00:00
85cda47c70
Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: jyong <718720800@qq.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: quicksand <quicksandzn@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Hanqing Zhao <sherry9277@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Harry <xh001x@hotmail.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
'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(
|
|
'h-2 w-2 rounded-[3px] border border-solid',
|
|
BACKGROUND_MAP[color],
|
|
BORDER_MAP[color],
|
|
SHADOW_MAP[color],
|
|
className,
|
|
)}
|
|
/>
|
|
)
|
|
}
|