Components

Input copy

A read-only value with a button that copies it, and says it did.

scheme

forSlots(InputCopySlots)(Recipes.InputCopy({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const InputCopyStyle = forSlots(InputCopySlots)(Recipes.InputCopy({}))

export const API_KEY = 'sk-live-4f9a2c71'

export const inputCopy = <Message>(
  style: NamedStyle<typeof InputCopySlots>,
  copied: boolean,
  onCopy: (text: string) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  InputCopy.view(
    { id: 'preview-api-key', label: 'API key', value: API_KEY, copied, onCopy: onCopy(API_KEY), style },
    h,
  )

The recipe ↗This code ↗