Function CopyButton

packages/devtools-ui/src/components/tree.tsx:356–408

(props: { value: unknown })

        {'{'}
      </span>

      <Show when={expanded()}>
        <span
          data-tsd-separator={props.keyName ? '' : undefined}
          class={styles().tree.expandedLine(Boolean(props.keyName))}
        >
          <For each={keys}>
            {(k) => (
              <>
                <JsonValue
                  value={props.value[k]}
                  keyName={k}
                  isLastKey={lastKeyName === k}
                  copyable={props.copyable}
                  defaultExpansionDepth={props.defaultExpansionDepth}
                  depth={props.depth + 1}
                  collapsePaths={props.collapsePaths}
                  path={`${props.path}${props.path ? '.' : ''}${k}`}
                  config={props.config}
                />
              </>
            )}
          </For>
        </span>
      </Show>

      <Show when={!expanded()}>
        <span
          data-tsd-syntax="comment"
          onClick={(e) => {
            e.stopPropagation()
            e.stopImmediatePropagation()
            setExpanded(!expanded())
          }}
          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
        >
          {`...`}
        </span>
      </Show>

      <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
        {'}'}
      </span>
    </span>
  )
}

type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'

const CopyButton = (props: { value: unknown }) => {
  const styles = createStyles()
  const { theme } = createTheme()
  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')

  return (
    <button