@aws-northstar/ui
Version:
NorthStar Design System v2
13 lines (12 loc) • 972 B
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ProgressBar from '@cloudscape-design/components/progress-bar';
import SpaceBetween from '@cloudscape-design/components/space-between';
import KeyValuePair from '../KeyValuePair';
import ColumnLayout from '@cloudscape-design/components/column-layout';
/**
* Key-value pairs are lists of properties (keys) followed by the corresponding value.
*/
const KeyValuePairs = ({ items, ...props }) => {
return (_jsx("div", { ...props, children: _jsx(ColumnLayout, { columns: items.length, variant: "text-grid", children: items.map((keyValuePairArray, indexColumn) => (_jsx(SpaceBetween, { size: "l", children: keyValuePairArray.map((pair, index) => 'variant' in pair && pair.variant === 'key-value' ? (_jsx(ProgressBar, { ...pair }, `column_${indexColumn}_item_${index}`)) : (_jsx(KeyValuePair, { ...pair }, `column_${indexColumn}_item_${index}`))) }, `column_${indexColumn}`))) }) }));
};
export default KeyValuePairs;