"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

type SystemStatusState = "operational" | "degraded" | "outage";

export interface SystemStatusProps extends React.HTMLAttributes<HTMLDivElement> {
  status?: SystemStatusState;
  label?: string;
  tooltipTitle?: string;
  description?: string;
  updatedAt?: string;
}

const statusStyles: Record<SystemStatusState, string> = {
  operational: "bg-primary",
  degraded: "bg-muted",
  outage: "bg-destructive",
};

const statusText: Record<SystemStatusState, string> = {
  operational: "Operational",
  degraded: "Degraded",
  outage: "Outage",
};

const statusDescription: Record<SystemStatusState, string> = {
  operational: "All systems are running normally.",
  degraded: "Some services may respond more slowly than usual.",
  outage: "We are investigating a service interruption.",
};

const statusLabelStyles: Record<SystemStatusState, string> = {
  operational: "text-primary",
  degraded: "text-muted-foreground",
  outage: "text-destructive",
};

export function SystemStatus({
  status = "operational",
  label = "System status",
  tooltipTitle = "System status",
  description,
  updatedAt,
  className,
  ...props
}: SystemStatusProps) {
  const detail = description ?? statusDescription[status];

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div
            className={cn(
              "inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground",
              className
            )}
            {...props}
          >
            <span
              className={cn(
                "h-2.5 w-2.5 rounded-full",
                statusStyles[status]
              )}
              aria-hidden="true"
            />
            <span>{label}</span>
            <span className={cn("text-sm", statusLabelStyles[status])}>
              {statusText[status]}
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <div className="space-y-1">
            <p className="text-sm font-semibold text-foreground">
              {tooltipTitle}
            </p>
            <p className="text-xs text-muted-foreground">{detail}</p>
            {updatedAt ? (
              <p className="text-xs text-muted-foreground">
                Updated {updatedAt}
              </p>
            ) : null}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

export type { SystemStatusState };
System Status

Dependencies

Files

Installation
