b8ab0208d0
Set up the complete project foundation for ClawX, a graphical AI assistant: - Electron main process with IPC handlers, menu, tray, and gateway management - React renderer with routing, layout components, and page scaffolding - Zustand state management for gateway, settings, channels, skills, chat, and cron - shadcn/ui components with Tailwind CSS and CSS variable theming - Build tooling with Vite, electron-builder, and TypeScript configuration - Testing setup with Vitest and Playwright - Development configurations (ESLint, Prettier, gitignore, env example)
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
/**
|
|
* Status Badge Component
|
|
* Displays connection/state status with color coding
|
|
*/
|
|
import { cn } from '@/lib/utils';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
type Status = 'connected' | 'disconnected' | 'connecting' | 'error' | 'running' | 'stopped' | 'starting';
|
|
|
|
interface StatusBadgeProps {
|
|
status: Status;
|
|
label?: string;
|
|
showDot?: boolean;
|
|
}
|
|
|
|
const statusConfig: Record<Status, { label: string; variant: 'success' | 'secondary' | 'warning' | 'destructive' }> = {
|
|
connected: { label: 'Connected', variant: 'success' },
|
|
running: { label: 'Running', variant: 'success' },
|
|
disconnected: { label: 'Disconnected', variant: 'secondary' },
|
|
stopped: { label: 'Stopped', variant: 'secondary' },
|
|
connecting: { label: 'Connecting', variant: 'warning' },
|
|
starting: { label: 'Starting', variant: 'warning' },
|
|
error: { label: 'Error', variant: 'destructive' },
|
|
};
|
|
|
|
export function StatusBadge({ status, label, showDot = true }: StatusBadgeProps) {
|
|
const config = statusConfig[status];
|
|
const displayLabel = label || config.label;
|
|
|
|
return (
|
|
<Badge variant={config.variant} className="gap-1.5">
|
|
{showDot && (
|
|
<span
|
|
className={cn(
|
|
'h-1.5 w-1.5 rounded-full',
|
|
config.variant === 'success' && 'bg-green-600',
|
|
config.variant === 'secondary' && 'bg-gray-400',
|
|
config.variant === 'warning' && 'bg-yellow-600 animate-pulse',
|
|
config.variant === 'destructive' && 'bg-red-600'
|
|
)}
|
|
/>
|
|
)}
|
|
{displayLabel}
|
|
</Badge>
|
|
);
|
|
}
|