@neo4j-ndl/react/skills/ndl-react/components/ai/code-preview.md

React implementation of Neo4j Design System

# CodePreview

Import: `import { CodePreview } from '@neo4j-ndl/react/ai'`

## Props

### CodePreview

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `code` | `string` | ✅ |  | The code content to display |
| `headerActions` | `ReactNode` |  |  | The actions to display in the header. Should be small CleanIconButton components. |
| `isLoading` | `boolean` |  | `false` | Whether the code block is loading |
| `label` | `'read' \| 'write'` |  |  | The current state of the code block |
| `language` | `'asciidoc' \| 'bash' \| 'c' \| 'csharp' \| 'css-extras' \| 'css' \| 'cypher' \| 'docker' \| 'go' \| 'graphql' \| 'java' \| 'javadoc' \| 'javascript' \| 'json' \| 'jsx' \| 'kotlin' \| 'php' \| 'python' \| 'regex' \| 'rust' \| 'sql' \| 'text' \| 'typescript' \| 'xml' \| 'yaml'` | ✅ |  | The language of the code (e.g., 'cypher', 'python', 'javascript') |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `theme` | `'ndl-code-dark' \| 'ndl-code-light'` |  |  | The theme of the code block |

## Examples

### Languages

```tsx
import { CodePreview } from '@neo4j-ndl/react/ai';

const pythonCode = `def show_functions(username, function_type='ALL'):
    """
    Show functions executable by user
    """
    query = f"SHOW {function_type} FUNCTIONS EXECUTABLE BY {username}"
    return query`;

export const Component = () => {
  return <CodePreview code={pythonCode} language="python" />;
};

export default Component;
```

### Loading

```tsx
import { CodePreview } from '@neo4j-ndl/react/ai';

export const Component = () => {
  return <CodePreview code="" language="cypher" isLoading={true} />;
};

export default Component;
```

### Read

```tsx
import { OutlinedButton } from '@neo4j-ndl/react';
import { CodePreview } from '@neo4j-ndl/react/ai';
import { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';

const cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY
username
[YIELD { * | field[, ...] } [ORDER BY field ...`;

export const Component = () => {
  return (
    <CodePreview
      code={cypherCode}
      language="cypher"
      label="read"
      headerActions={
        <OutlinedButton
          leadingVisual={<PencilSquareIconOutline />}
          variant="neutral"
          size="small"
        >
          Send to Query
        </OutlinedButton>
      }
    />
  );
};

export default Component;
```

### Write

```tsx
import { CleanIconButton } from '@neo4j-ndl/react';
import { CodePreview } from '@neo4j-ndl/react/ai';
import {
  PencilSquareIconOutline,
  PlayCircleIconOutline,
} from '@neo4j-ndl/react/icons';

const cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY
username
[YIELD { * | field[, ...] } [ORDER BY field ...`;

export const Component = () => {
  return (
    <CodePreview
      code={cypherCode}
      language="cypher"
      label="write"
      headerActions={
        <>
          <CleanIconButton
            variant="neutral"
            description="Send to Query"
            size="small"
          >
            <PencilSquareIconOutline />
          </CleanIconButton>
          <CleanIconButton
            variant="neutral"
            description="Run in Query"
            size="small"
          >
            <PlayCircleIconOutline />
          </CleanIconButton>
        </>
      }
    />
  );
};

export default Component;
```