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";

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;

  return (
    <div className="flex flex-col gap-3 rounded-[var(--radius-widget)] border border-border bg-surface p-4 sm:col-span-2">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-fg">{widget.name}</span>
        {data && (
          <span className="font-mono text-xs tabular-nums text-fg-muted">
            {data.entrypoints.map((ep) => ep.address).join(" · ") || `${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 flex-col gap-1">
          {data.routers.map((router) => (
            <div key={router.name} className="flex items-center justify-between gap-2 text-xs">
              <span className="truncate text-fg" title={router.rule}>
                {router.name.replace(/@.*$/, "")}
              </span>
              <span className="flex items-center gap-1 text-fg-muted">
                {router.tls && <span title="TLS enabled">🔒</span>}
                <span
                  className={router.status === "enabled" ? "text-status-up" : "text-status-down"}
                >
                  {router.status}
                </span>
              </span>
            </div>
          ))}
          <span className="pt-1 text-xs text-fg-muted">
            <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
          </span>
        </div>
      )}
    </div>
  );
}