Function ExampleCode

docs/docs-components/ExampleCode.tsx:30–154

({
  code,
  hideCodePreview = false,
  readOnly,
  name,
  developmentEditor,
}: Props)

};

export default function ExampleCode({
  code,
  hideCodePreview = false,
  readOnly,
  name,
  developmentEditor,
}: Props) {
  const { devExampleMode } = useAppContext();

  const [expanded, setExpanded] = useState(developmentEditor);
  const [showExpandButton, setShowExpandButton] = useState(hideCodePreview);
  const [maxHeight, setMaxHeight] = useState('500px');
  const codeExampleRef = useRef<null | HTMLDivElement>(null);
  const codeBoxMinHeight = hideCodePreview ? undefined : '152px';
  let containerBoxMaxHeight;

  // If an example is expanded, maxHeight should be the full code's height
  // If !expanded, code blocks that hide the preview should have no min height
  // All others have small min height
  if (expanded) {
    containerBoxMaxHeight = maxHeight;
  } else if (hideCodePreview) {
    containerBoxMaxHeight = '0';
  } else {
    containerBoxMaxHeight = CODE_EXAMPLE_HEIGHT;
  }

  useEffect(() => {
    const height = codeExampleRef?.current?.clientHeight ?? 0;

    // Save the height so we know how far to animate to
    setMaxHeight(`${height}px`);

    if (height > CODE_EXAMPLE_HEIGHT && devExampleMode === 'default') {
      setExpanded(false);
      setShowExpandButton(true);
    }
  }, [code, hideCodePreview, devExampleMode]);

  return (
    <Box marginTop={2}>
      <Flex
        direction="column"
        gap={{
          row: 0,
          column: 2,
        }}
      >
        <Flex
          alignItems="center"
          gap={{
            row: 2,
            column: 0,
          }}
          justifyContent="between"
        >
          <Flex justifyContent="start">
            <OpenSandboxButton