All files / src/pages/flowsheet-page/dynamics/results-panel/components ResultViewLayout.tsx

100% Statements 21/21
65.21% Branches 15/23
100% Functions 2/2
100% Lines 15/15

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 50 51 52 53 54 55 56 57 58 59 60      33x                     18x   51x 48x 33x   33x           99x 132x       69x                           138x     69x       138x 207x 207x   207x      
import type { ReactNode } from "react";
import { ScrollArea } from "@/ahuora-design-system/ui/scroll-area";
 
export function ResultViewGrid({
  children,
  controls,
  selectedObjectId,
}: {
  children: ReactNode;
  controls?: ReactNode;
  selectedObjectId: number | undefined;
}) {
  return (
    <ScrollArea className="h-full">
      {!selectedObjectId && (
        <p className="p-4">Select a unit operation to view its results.</p>
      )}
      {controls && <div className="flex justify-end px-4 pt-4">{controls}</div>}
      <div
        className={
          controls
            ? "grid grid-cols-1 gap-4 px-4 pb-4 pt-3 2xl:grid-cols-2"
            : "grid grid-cols-1 gap-4 p-4 2xl:grid-cols-2"
        }
      >
        {children}
      </div>
    </ScrollArea>
  );
}
 
export function ResultCard({
  actions,
  children,
  title,
  unit,
}: {
  actions?: ReactNode;
  children: ReactNode;
  title: string;
  unit?: string | null;
}) {
  return (
    <div className="flex flex-col gap-4 rounded-md border p-4">
      <div className="flex min-w-0 items-start justify-between gap-3">
        <p className="min-w-0 font-medium leading-tight">{title}</p>
        <div className="flex shrink-0 items-center gap-3">
          {actions}
          {unit && (
            <span className="text-xs leading-tight text-muted-foreground">
              {unit}
            </span>
          )}
        </div>
      </div>
      {children}
    </div>
  );
}