All files / src/pages/flowsheet-page/economics/cost-items-panel/capital-lines CapitalLinesPanel.tsx

100% Statements 8/8
50% Branches 7/14
100% Functions 1/1
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49          56x                                       56x       61x 56x                           224x 168x      
import { SlidersHorizontal } from "lucide-react";
import type { ReactNode } from "react";
import { Badge } from "@/ahuora-design-system/ui/badge";
import { Spinner } from "@/ahuora-design-system/ui/spinner";
 
export function CapitalLinesPanel({
  enabledCount,
  loading,
  loadError,
  children,
}: {
  enabledCount: number;
  loading: boolean;
  loadError: boolean;
  children: ReactNode;
}) {
  return (
    <section
      className="rounded-md border bg-card p-4"
      aria-label="Capital lines"
    >
      <div className="mb-4 flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <SlidersHorizontal className="size-4 text-primary" />
          <h3 className="text-sm font-semibold">Capital lines</h3>
        </div>
        <Badge variant="secondary" size="xs" borderRadius="round">
          {enabledCount} enabled
        </Badge>
      </div>
      {loading ? (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Spinner size="small" />
          Loading capital lines
        </div>
      ) : loadError ? (
        <div
          className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive"
          role="alert"
        >
          Could not load capital line configuration.
        </div>
      ) : (
        children
      )}
    </section>
  );
}