audi-app/design-system/.design-sync/previews/StatGrid.tsx

import * as React from "react";
import { StatGrid } from "@audi-dash/ui";

function Root({ children }: { children: React.ReactNode }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
      {children}
    </div>
  );
}

export function FourColumns() {
  return (
    <Root>
      <div style={{ width: 320 }}>
        <StatGrid
          items={[
            { value: 42318, caption: "Kilometer" },
            { value: 6.8, unit: "l", caption: "Ø Verbrauch" },
            { value: 12, caption: "Fahrten" },
            { value: 312, unit: "km", caption: "Reichweite" },
          ]}
        />
      </div>
    </Root>
  );
}

export function TwoColumns() {
  return (
    <Root>
      <div style={{ width: 200 }}>
        <StatGrid
          columns={2}
          items={[
            { value: 2.3, unit: "bar", caption: "Vorne" },
            { value: 2.1, unit: "bar", caption: "Hinten" },
          ]}
        />
      </div>
    </Root>
  );
}