Function CodeOutput

packages/dev/s2-docs/src/VisualExampleClient.tsx:267–297

({code, type, showCoachMark}: CodeOutputProps)

}

export function CodeOutput({code, type, showCoachMark}: CodeOutputProps) {
  let {name, importSource, props, controls, propsObject} = useContext(Context);

  if (propsObject) {
    props = {[propsObject]: props};
  }

  code ||= (
    <div
      className={style({
        overflow: 'auto',
        '--code-padding-end': {
          type: 'paddingEnd',
          value: 64 // Extra space for the toolbar
        }
      })}>
      <Pre>
        <code style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
          {importSource ? renderImports(name, importSource, props) : null}
          {renderElement(name, props, controls)}
        </code>
      </Pre>
    </div>
  );

  return (
    <CodePlatter type={type} showCoachMark={showCoachMark}>
      {code}
    </CodePlatter>
  );
}

export function CodeProps({indent = ''}) {
  let {props, controls, propsObject} = useContext(Context);