<script>
  import { CodeSnippet } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";

  let code = `// helpers.js
  
export function multiply(a: number, b: number) {
  return a * b;
}

export function divide(a: number, b: number) {
  return a / b;
}

export function add(a: number, b: number) {
  return a + b;
}

export function subtract(a: number, b: number) {
  return a - b;
}`;

let comment = `
> \`carbon-components-svelte\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.

> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
`
</script>

Code snippets display and copy code examples. They support single-line, multi-line, and inline formats with customizable copy and expand functionality.

This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.

You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).

## Default

Display a single-line code snippet by default.

<CodeSnippet code="npm i carbon-components-svelte" />

## Overriding copy functionality

Pass a custom function to the `copy` prop to override the default copy behavior.

In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.

<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />

## Preventing copy functionality

Pass a no-op function to the `copy` prop to disable copying.

<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />

## Inline

Set `type="inline"` to display code inline with text.

<CodeSnippet type="inline" code="rm -rf node_modules/" />

## Multi-line

Set `type="multi"` to display multiple lines of code with expand/collapse functionality.

<CodeSnippet type="multi" {code} />

## Expanded by default

Set `expanded` to `true` to show the full multi-line code snippet.

<CodeSnippet type="multi" {code} expanded />

## Reactive example

The multi-line code snippet dispatches "expand" and "collapse" events.

<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />

## Custom copy feedback text

Set `feedback` to customize the copy button feedback text.

<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />

## Hidden copy button

Set `hideCopyButton` to `true` to hide the copy button.

<CodeSnippet type="multi" {code} hideCopyButton />

## Hidden show more button

Set `showMoreLess` to `false` to hide the expand/collapse button on multi-line snippets.

<CodeSnippet type="multi" {code} showMoreLess={false} />

## Hidden copy, show more buttons

Hide both the copy and expand/collapse buttons.

<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />

## Custom show more/less text

Set `showMoreText` and `showLessText` to customize the expand/collapse button text.

<CodeSnippet type="multi" {code} showMoreText="Expand" showLessText="Collapse" />

## Disabled

Set `disabled` to `true` to disable interaction. This only applies to `"single"` and `"multi"` types.

<CodeSnippet disabled code="npm i carbon-components-svelte" />
<br />
<CodeSnippet disabled type="multi" code="{comment}" />

## Wrapped text

By default, the code snippet preserves text formatting and does not wrap text.

Set `wrapText` to `true` to wrap long lines in multi-line snippets.

<CodeSnippet wrapText type="multi" code="{comment}" />

## Dynamic multi-line code

Use the `code` prop instead of the default slot for dynamically updated code.

<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />

## Hidden multi-line code

The "Show more" button relies on the element's computed height. For hidden content, the button won't appear because the height is `0`.

Re-render the component to fix this issue.

<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />

## Skeleton

Set `skeleton` to `true` to show a loading state. Defaults to `"single"` type.

<CodeSnippet skeleton />

## Skeleton (multi-line)

Set `type="multi"` with `skeleton` to show a multi-line loading state.

<CodeSnippet type="multi" skeleton />