Function Code

src/components/code/Code.tsx:26–66

({
  code: rawCode,
  language: rawLang,
}: {
  code: string
  language: string
})

 * @example view `src/components/code/CodeGroupFromFile.tsx`
 */
export default function Code({
  code: rawCode,
  language: rawLang,
}: {
  code: string
  language: string
}) {
  const code = useMemo(() => (rawCode ?? '').trim(), [rawCode])
  const { inCodeGroup, hasTitle: rounded } = useCodeGroup()
  const inline = useMemo(() => {
    return code.trim().split('\n').length === 1 && !inCodeGroup
  }, [inCodeGroup, code])

  const lang = useMemo(
    () => (rawLang ? rawLang.replace('language-', '') : 'plaintext'),
    [rawLang],
  )

  if (inline) {
    return (
      <pre className="inline-block rounded-lg bg-zinc-800 px-2 text-sm text-white">
        {rawCode}
      </pre>
    )
  }

  return (
    <div
      className={cn(
        'prose overflow-x-auto border border-gray-700 bg-zinc-900 pb-0 dark:border-gray-700',
        rounded ? 'rounded-b-lg rounded-t-none' : 'rounded-lg',
        inCodeGroup && 'border-0',
      )}
    >
      <CopyButton value={code} className="z-10 border-gray-600" />
      <SyntaxHighlighter language={lang} wrapLines wrapLongLines style={theme}>
        {code}
      </SyntaxHighlighter>
    </div>
  )
}

/**
 * This is a raw code block component that accepts code as `className: string`