List Pair

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

Props

Name	Type	Description	Required	Default
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

4 separate List Pair components with different style prop values and a markdown link

Javascript

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/)',
    },
  ],
});

React

import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
import { Urgency } from '@oliveai/ldk/dist/whisper/types';

const TestListPair = () => {
  return (
    <oh-whisper label="List Pair">
      <oh-list-pair
        copyable={true}
        labelCopyable={false}
        label="Label None Not Copyable"
        onValueCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.None}
        value="Value None Copyable [Link](https://docs.oliveai.dev/)"
      />
      <oh-list-pair
        copyable={true}
        labelCopyable={true}
        label="Label Error Copyable"
        onLabelCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.Error}
        value="Value Error Copyable [Link](https://docs.oliveai.dev/)"
      />
      <oh-list-pair
        copyable={true}
        labelCopyable={false}
        label="Label Success Not Copyable"
        onValueCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.Success}
        value="Value Success Copyable [Link](https://docs.oliveai.dev/)"
      />
      <oh-list-pair
        copyable={false}
        labelCopyable={true}
        label="Label Warning Copyable"
        onLabelCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.Warning}
        value="Value Warning Not Copyable [Link](https://docs.oliveai.dev/)"
      />
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<TestListPair />);