[docs-infra] Improved useCode Pre

[dav-is]

Shaping Page

import styles from './CodeContent.module.css'

export function CodeContent(props) {
  const code = useCode(props, { render: <pre className={styles.pre} /> })
  
  return code.selectedFile
}

import styles from './CodeContent.module.css'

export function CodeContent(props) {
  const code = useCode(props, { render: <pre className={styles.pre} /> })
  
  return <div>
	  {code.files.map((file) => file.component)}
  </div>
}

Also consider, useDemo and useCode might make more sense to return a <code> component, and leave the <pre> to the user:

import styles from './CodeContent.module.css'

export function CodeContent(props) {
  const code = useCode(props, { render: <code className={styles.code} /> })
  
  return <pre className={styles.pre}>{code.selectedFile}</pre>
}

import styles from './CodeContent.module.css'

export function CodeContent(props) {
  const code = useCode(props, { render: <code className={styles.code} /> })
  
  return <div>
	  {code.files.map((file) => <pre className={styles.pre}>{file.component}</pre>)}
  </div>
}