spb/fetcha

1import * as React from "react";2import { cva, type VariantProps } from "class-variance-authority";3import { cn } from "@/lib/utils";45const badgeVariants = cva("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11.5px] font-medium leading-4 whitespace-nowrap", {6  variants: {7    variant: {8      default: "border-border bg-bg-muted text-fg-muted",9      outline: "border-border text-fg-muted bg-transparent",10      accent: "border-transparent bg-accent-soft text-accent",11      success: "border-transparent bg-success-soft text-success",12      warning: "border-transparent bg-warning-soft text-warning",13      danger: "border-transparent bg-danger-soft text-danger",14      info: "border-transparent bg-info-soft text-info",15      solid: "border-transparent bg-fg text-bg",16    },17  },18  defaultVariants: { variant: "default" },19});2021export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {22  dot?: boolean;23}2425export function Badge({ className, variant, dot, children, ...props }: BadgeProps) {26  return (27    <span className={cn(badgeVariants({ variant }), className)} {...props}>28      {dot ? <span className="size-1.5 rounded-full bg-current" aria-hidden /> : null}29      {children}30    </span>31  );32}3334export function StatusBadge({ status }: { status: string }) {35  const s = status.toLowerCase();36  const variant: BadgeProps["variant"] =37    ["success", "ok", "active", "healthy", "online", "verified", "live"].includes(s) ? "success"38    : ["failed", "error", "down", "revoked", "banned", "suspended", "blocked"].includes(s) ? "danger"39    : ["pending", "degraded", "expired", "warning", "closed", "test"].includes(s) ? "warning"40    : ["unconfigured", "archived", "disabled"].includes(s) ? "outline"41    : "default";42  return <Badge variant={variant} dot>{status}</Badge>;43}44