NapCatQQ/napcat.webui/src/components/onebot/ws_status.tsx

import clsx from 'clsx';
import { ReadyState } from 'react-use-websocket';

export interface WSStatusProps {
  state: ReadyState
}

function StatusTag ({
  title,
  color,
}: {
  title: string
  color: 'success' | 'primary' | 'warning'
}) {
  const textClassName = `text-${color} text-sm`;
  const bgClassName = `bg-${color}`;
  return (
    <div className='flex flex-col justify-center items-center gap-1 rounded-md px-2 col-span-2 md:col-span-1'>
      <div className={clsx('w-4 h-4 rounded-full', bgClassName)} />
      <div className={textClassName}>{title}</div>
    </div>
  );
}

export default function WSStatus ({ state }: WSStatusProps) {
  if (state === ReadyState.OPEN) {
    return <StatusTag title='已连接' color='success' />;
  }
  if (state === ReadyState.CLOSED) {
    return <StatusTag title='已关闭' color='primary' />;
  }
  if (state === ReadyState.CONNECTING) {
    return <StatusTag title='连接中' color='warning' />;
  }
  if (state === ReadyState.CLOSING) {
    return <StatusTag title='关闭中' color='warning' />;
  }
  return null;
}