pulsenode/components/widgets/traefik/Widget.tsx

"use client";

import { Lock } from "@phosphor-icons/react/ssr";
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;

  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.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">
          {data.routers.map((router) => (
            <div key={router.name} className="flex items-center justify-between gap-2 border-t border-border py-1.5 text-[13px] first:border-t-0">
              <span className="truncate text-fg" title={router.rule}>
                {router.name.replace(/@.*$/, "")}
              </span>
              <span className="flex items-center gap-1.5 text-[11px] text-fg-muted">
                {router.tls && <Lock size={11} aria-label="TLS enabled" />}
                <span
                  className={`flex items-center gap-1.5 ${router.status === "enabled" ? "text-status-up" : "text-status-down"}`}
                >
                  <span className="h-1.5 w-1.5 rounded-full bg-current" />
                  {router.status}
                </span>
              </span>
            </div>
          ))}
          <span className="pt-2 text-[11px] text-fg-muted">
            <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
          </span>
        </div>
      )}
    </WidgetCard>
  );
}