List Pair

The List Pair component helps organize data by label and value.

Props

NameTypeDescriptionRequiredDefault

copyable

boolean

Copy the unbolded text to the right (including markdown).

labelCopyable

boolean

Copy the bolded text to the left (including markdown).

false

label

string

The bolded left hand text.

onValueCopy

function

Executes the provided function when the value is copied.

null

onLabelCopy

function

Executes the provided function when the label is copied.

style

+Urgency

Background color of the component.

value

string

The unbolded left hand text. Markdown compatible.

Note: Types marked with + are Olive LDK enums

Examples

import { whisper } from '@oliveai/ldk';
import {
  Whisper,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

await whisper.create({
  label: 'List Pair',
  components: [
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: true,
      label: 'Label None Not Copyable',
      labelCopyable: false,
      onValueCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.None,
      value: 'Value None Copyable [Link](https://docs.oliveai.dev/)',
    },
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: true,
      label: 'Label Error Copyable',
      labelCopyable: true,
      onLabelCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.Error,
      value: 'Value Error Copyable [Link](https://docs.oliveai.dev/)',
    },
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: true,
      label: 'Label Success Not Copyable',
      labelCopyable: false,
      onValueCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.Success,
      value: 'Value Success Copyable [Link](https://docs.oliveai.dev/)',
    },
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: false,
      label: 'Label Warning Copyable',
      labelCopyable: true,
      onLabelCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.Warning,
      value: 'Value Warning Not Copyable [Link](https://docs.oliveai.dev/)',
    },
  ],
});

Last updated