Function renderElement

packages/dev/s2-docs/src/VisualExampleClient.tsx:329–373

(name: string, props: Props, controls?: Controls, indent = '')

}

function renderElement(name: string, props: Props, controls?: Controls, indent = '') {
  let start = (
    <>
      &lt;<span className={style({color: 'red-1000'})}>{name}</span>
    </>
  );
  let renderedProps = Object.keys(props)
    .filter(prop => prop !== 'children')
    .map(prop => renderProp(prop, props[prop], controls?.[prop], '  ' + indent))
    .filter(Boolean);
  let newlines = name.length + countChars(renderedProps) > 40;
  renderedProps = renderedProps.map((p, i) => (
    <Fragment key={i}>
      {newlines ? '\n  ' + indent : ' '}
      {p}
    </Fragment>
  ));
  if (props.children) {
    let end = (
      <>
        &lt;/<span className={style({color: 'red-1000'})}>{name}</span>&gt;
      </>
    );
    let children = renderChildren(props.children, indent);
    if (typeof children !== 'string') {
      newlines = true;
    }
    return (
      <>
        {start}
        {renderedProps}&gt;{newlines ? '\n  ' + indent : null}
        {children}
        {newlines ? '\n' + indent : null}
        {end}
      </>
    );
  }

  return (
    <>
      {start}
      {renderedProps} /&gt;
    </>
  );
}

function renderChildren(children, indent = '') {
  if (children?.icon || children?.avatar || children?.badge) {