CodeBlock

<script lang="ts">
	import CodeBlock from '@tcpsystems/ui/foundation/CodeBlock';
</script>

<CodeBlock lang="sh" code="pnpm add @tcpsystems/ui" />

<script lang="ts">
	import CodeBlock from '@tcpsystems/ui/foundation/CodeBlock';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack>
	<CodeBlock lang="json" title="Release payload" code={`{
  "service": "search",
  "replicas": 3,
  "healthy": true
}`} />
	<CodeBlock lang="ts" title="Check service health" code={`const response = await fetch("/api/health");
const health = await response.json();`} />
</Stack>

<script lang="ts">
	import CodeBlock from '@tcpsystems/ui/foundation/CodeBlock';
</script>

<CodeBlock title="Deployment output" label="Search deployment log" code={`14:32:01 Build verified
14:32:04 Search gateway started
14:32:06 Health checks passed`} />

<script lang="ts">
	import CodeBlock from '@tcpsystems/ui/foundation/CodeBlock';
</script>

<!-- Use trusted build-time highlighter output for html. -->
<CodeBlock
	title="Release status"
	code={'{"healthy": true}'}
	html={'{<span class="tcp-tok-f">"healthy"</span>: <span class="tcp-tok-k">true</span>}'}
/>