Function BaseCodeBox

packages/ui-components/src/Common/BaseCodeBox/index.tsx:77–122

({
  children,
  language,
  className,
  copyButtonLabel,
  copiedButtonLabel,
  as = 'a',
}: PropsWithChildren<CodeBoxProps>)

};

const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
  children,
  language,
  className,
  copyButtonLabel,
  copiedButtonLabel,
  as = 'a',
}: PropsWithChildren<CodeBoxProps>) => {
  const [copied, copy] = useCopy();

  const containerRef = useRef<HTMLPreElement>(null);

  const handleCopy = () => copy(containerRef.current?.textContent);

  const ButtonIcon = copied ? DocumentDuplicateIcon : CodeBracketIcon;

  const hideFooter = className?.includes('no-footer');

  return (
    <div className={styles.root}>
      <pre
        ref={containerRef}
        className={classNames(styles.content, className)}
        tabIndex={0}
      >
        {transformCode(children as ReactElement<PropsWithChildren>, language)}
      </pre>

      {!language || hideFooter || (
        <div className={styles.footer}>
          <span className={styles.language}>{language}</span>

          <BaseButton
            as={as}
            className={styles.action}
            kind="neutral"
            onClick={handleCopy}
          >
            <ButtonIcon className="size-4" />
            {copied ? copiedButtonLabel : copyButtonLabel}
          </BaseButton>
        </div>
      )}
    </div>
  );
};

export default BaseCodeBox;