pulsenode/components/widgets/traefik/Widget.tsx

"use client";

import type { Widget } from "@/lib/config/schema";
import { useWidgetSubscription } from "@/lib/ws/client";
import { SkeletonLines } from "@/components/widgets/Skeleton";
import { WidgetCard } from "@/components/widgets/WidgetCard";

type TraefikWidget = Extract<Widget, { type: "traefik" }>;

export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "traefik" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : null;
  const enabledCount = data?.routers.filter((router) => router.status === "enabled").length ?? 0;

  return (
    <WidgetCard span={4}>
      <div className="flex items-center justify-between">
        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
        {data && (
          <span className="font-mono text-[11px] tabular-nums text-fg-muted">
            {data.entrypoints.length} entrypoints
          </span>
        )}
      </div>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {!result && !errorMessage && <SkeletonLines count={3} />}
      {data && (
        <>
          <div className="flex items-start gap-4">
            <div className="flex flex-col gap-0.5">
              <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-accent">
                {data.routers.length}
              </span>
              <span className="text-[10px] tracking-wide text-fg-muted uppercase">Routes</span>
            </div>
            {enabledCount !== data.routers.length && (
              <div className="flex flex-col gap-0.5 border-l border-border pl-4">
                <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-status-degraded">
                  {enabledCount}
                </span>
                <span className="text-[10px] tracking-wide text-fg-muted uppercase">Enabled</span>
              </div>
            )}
          </div>
          <span className="text-[11px] text-fg-muted">
            <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
          </span>
        </>
      )}
    </WidgetCard>
  );
}