45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|