Centralize metric and description layouts

2026-08-18 11:30:39 +02:00
parent 6814a41ae4
commit ee5c881df9
12 changed files with 241 additions and 45 deletions
@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type MetricGridColumns = 1 | 2 | 3 | 4 | 5 | "auto";
+export type MetricGridDensity = "compact" | "default" | "loose";
+export type MetricGridSpacing = "block" | "inset" | "none";
+export type MetricGridMinimum = "fluid" | "compact" | "default" | "wide";
+export type MetricGridCollapseAt = "narrow" | "workspace" | "standard" | "wide" | "never";
+
+export type MetricGridProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  columns?: MetricGridColumns;
+  density?: MetricGridDensity;
+  spacing?: MetricGridSpacing;
+  minimum?: MetricGridMinimum;
+  collapseAt?: MetricGridCollapseAt;
+};
+
+export default function MetricGrid({
+  children,
+  columns = 4,
+  density = "default",
+  spacing = "block",
+  minimum = "default",
+  collapseAt = "workspace",
+  className = "",
+  ...props
+}: MetricGridProps) {
+  return (
+    <div
+      {...props}
+      className={[
+        "metric-group-layout",
+        `metric-group-columns-${columns}`,
+        `metric-group-density-${density}`,
+        `metric-group-spacing-${spacing}`,
+        `metric-group-minimum-${minimum}`,
+        `metric-group-collapse-${collapseAt}`,
+        className
+      ].filter(Boolean).join(" ")}
+    >
+      {children}
+    </div>
+  );
+}