first commit

ui/app/workspace/dashboard/components/charts/chartCard.tsx

@@ -0,0 +1,71 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+interface ChartCardProps {
+  title: string;
+  children: ReactNode;
+  headerActions?: ReactNode;
+  loading?: boolean;
+  testId?: string;
+  height?: string;
+  className?: string;
+}
+
+export function ChartCard({
+  title,
+  children,
+  headerActions,
+  loading,
+  testId,
+  height = "200px",
+  className,
+}: ChartCardProps) {
+  if (loading) {
+    return (
+      <Card
+        className={cn("min-w-0 rounded-sm p-2 shadow-none", className)}
+        data-testid={testId}
+      >
+        <div className="mb-2 space-y-2">
+          <span className="text-primary pl-2 text-sm font-medium">{title}</span>
+          {headerActions && (
+            <div
+              className="w-full min-w-0"
+              data-testid={testId ? `${testId}-actions` : undefined}
+            >
+              {headerActions}
+            </div>
+          )}
+        </div>
+        <div
+          style={{ height }}
+          data-testid={testId ? `${testId}-chart-skeleton` : undefined}
+        >
+          <Skeleton className="h-full w-full" />
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      className={cn("min-w-0 rounded-sm p-2 shadow-none", className)}
+      data-testid={testId}
+    >
+      <div className="mb-2 space-y-2">
+        <span className="text-primary pl-2 text-sm font-medium">{title}</span>
+        {headerActions && (
+          <div
+            className="w-full min-w-0"
+            data-testid={testId ? `${testId}-actions` : undefined}
+          >
+            {headerActions}
+          </div>
+        )}
+      </div>
+      <div style={{ height }}>{children}</div>
+    </Card>
+  );
+}