ComponentCode() — ui Function Reference

Architecture documentation for the ComponentCode() function in component-source.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ComponentCode() — ui Function Reference

Dependency Diagram

graph TD
  f2f8534e_d3e9_aae3_ddbb_998dc6265aa6["ComponentCode()"]
  6e002999_74c0_6885_6d92_dd3803998064["component-source.tsx"]
  f2f8534e_d3e9_aae3_ddbb_998dc6265aa6 -->|defined in| 6e002999_74c0_6885_6d92_dd3803998064
  style f2f8534e_d3e9_aae3_ddbb_998dc6265aa6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/component-source.tsx lines 89–116

function ComponentCode({
  code,
  highlightedCode,
  language,
  title,
}: {
  code: string
  highlightedCode: string
  language: string
  title: string | undefined
}) {
  return (
    <figure data-rehype-pretty-code-figure="" className="[&>pre]:max-h-96">
      {title && (
        <figcaption
          data-rehype-pretty-code-title=""
          className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
          data-language={language}
        >
          {getIconForLanguageExtension(language)}
          {title}
        </figcaption>
      )}
      <CopyButton value={code} />
      <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
    </figure>
  )
}