75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
'use client'
|
|
import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
|
|
import classNames from '@/utils/classnames'
|
|
import { RiErrorWarningFill } from '@remixicon/react'
|
|
import { type VariantProps, cva } from 'class-variance-authority'
|
|
import type { CSSProperties } from 'react'
|
|
import React from 'react'
|
|
|
|
export enum NodeStatusEnum {
|
|
warning = 'warning',
|
|
error = 'error',
|
|
}
|
|
|
|
const nodeStatusVariants = cva(
|
|
'flex items-center gap-1 rounded-md px-2 py-1 system-xs-medium',
|
|
{
|
|
variants: {
|
|
status: {
|
|
[NodeStatusEnum.warning]: 'bg-state-warning-hover text-text-warning',
|
|
[NodeStatusEnum.error]: 'bg-state-destructive-hover text-text-destructive',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
status: NodeStatusEnum.warning,
|
|
},
|
|
},
|
|
)
|
|
|
|
const StatusIconMap: Record<NodeStatusEnum, { IconComponent: React.ElementType; message: string }> = {
|
|
[NodeStatusEnum.warning]: { IconComponent: AlertTriangle, message: 'Warning' },
|
|
[NodeStatusEnum.error]: { IconComponent: RiErrorWarningFill, message: 'Error' },
|
|
}
|
|
|
|
export type NodeStatusProps = {
|
|
message?: string
|
|
styleCss?: CSSProperties
|
|
iconClassName?: string
|
|
} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof nodeStatusVariants>
|
|
|
|
const NodeStatus = ({
|
|
className,
|
|
status,
|
|
message,
|
|
styleCss,
|
|
iconClassName,
|
|
children,
|
|
...props
|
|
}: NodeStatusProps) => {
|
|
const Icon = StatusIconMap[status ?? NodeStatusEnum.warning].IconComponent
|
|
const defaultMessage = StatusIconMap[status ?? NodeStatusEnum.warning].message
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
nodeStatusVariants({ status, className }),
|
|
)}
|
|
style={styleCss}
|
|
{...props}
|
|
>
|
|
<Icon
|
|
className={classNames(
|
|
'h-3.5 w-3.5 shrink-0',
|
|
iconClassName,
|
|
)}
|
|
/>
|
|
<span>{message ?? defaultMessage}</span>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
NodeStatus.displayName = 'NodeStatus'
|
|
|
|
export default React.memo(NodeStatus)
|