cm_whatsapp_bot_v1/apps/web/src/components/account-status-badge.tsx
yiekheng 7708dd671c feat(web): dashboard + accounts list + account detail
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 23:27:24 +08:00

52 lines
1.5 KiB
TypeScript

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
type AccountStatus =
| "connected"
| "pending"
| "connecting"
| "disconnected"
| "logged_out"
| "banned";
const STATUS_LABEL: Record<AccountStatus, string> = {
connected: "Connected",
pending: "Pending",
connecting: "Connecting",
disconnected: "Disconnected",
logged_out: "Logged Out",
banned: "Banned",
};
const STATUS_CLASS: Record<AccountStatus, string> = {
connected:
"bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400 border-transparent",
pending:
"bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400 border-transparent",
connecting:
"bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400 border-transparent",
disconnected:
"bg-amber-200/40 text-amber-600 dark:bg-amber-900/30 dark:text-amber-500 border-transparent",
logged_out:
"bg-red-500/15 text-red-600 dark:bg-red-500/20 dark:text-red-400 border-transparent",
banned:
"bg-red-700/20 text-red-800 dark:bg-red-900/40 dark:text-red-300 border-transparent",
};
interface AccountStatusBadgeProps {
status: string;
className?: string;
}
export function AccountStatusBadge({ status, className }: AccountStatusBadgeProps) {
const key = status as AccountStatus;
const label = STATUS_LABEL[key] ?? status;
const cls = STATUS_CLASS[key] ?? "bg-secondary text-secondary-foreground border-transparent";
return (
<Badge variant="secondary" className={cn(cls, className)}>
{label}
</Badge>
);
}