KeyValueList

For detail panes and inspectors. Any value can carry a copyValue and gets a copy button on hover.

import { Chip, KeyValueList } from '@andrewbehma/glass-ui';

Playground

KeyValueList.tsx

import { Chip, KeyValueList } from '@andrewbehma/glass-ui';

<div className="w-full max-w-[28rem]">
  <KeyValueList
    columns={2}
    items={[
      { key: 'id', label: 'Deployment', value: 'dpl_7Hq2xN', copyValue: 'dpl_7Hq2xN' },
      { key: 'branch', label: 'Branch', value: 'main' },
      { key: 'region', label: 'Region', value: 'fra1' },
      { key: 'duration', label: 'Build time', value: '41s' },
      { key: 'status', label: 'Status', value: <Chip tone="ok" size="sm">Ready</Chip> },
      { key: 'by', label: 'Triggered by', value: 'Mira Kovalenko' },
    ]}
  />
</div>