CodeBlock

import { CodeBlock } from "@grassroot/ui-react/advanced";
 
const code = `#!/usr/bin/env bash
set -euo pipefail
kubectl rollout status deploy/ledger-api --timeout=90s`;
 
<CodeBlock code={code} filename="deploy.sh" lang="bash" />

<script setup lang="ts">
import { CodeBlock } from "@grassroot/ui-vue";
 
const code = `#!/usr/bin/env bash
set -euo pipefail
kubectl rollout status deploy/ledger-api --timeout=90s`;
</script>
 
<template>
  <CodeBlock :code="code" filename="deploy.sh" lang="bash" />
</template>

import { Component } from "@angular/core";
import { GrassrootCodeBlock } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCodeBlock],
  template: `
    <grassroot-code-block [code]="code" filename="deploy.sh" lang="bash" />
  `,
})
export class ExampleComponent {
  readonly code = `#!/usr/bin/env bash
  set -euo pipefail
  kubectl rollout status deploy/ledger-api --timeout=90s`;
}

<script lang="ts">
  import { CodeBlock } from "@grassroot/ui-svelte";
 
  const code = `#!/usr/bin/env bash
  set -euo pipefail
  kubectl rollout status deploy/ledger-api --timeout=90s`;
</script>
 
<CodeBlock code={code} filename="deploy.sh" lang="bash" />

import { CodeBlock } from "@grassroot/ui-solid";
 
const code = `#!/usr/bin/env bash
set -euo pipefail
kubectl rollout status deploy/ledger-api --timeout=90s`;
 
export function Example() {
  return (
    <>
      <CodeBlock code={code} filename="deploy.sh" lang="bash" />
    </>
  );
}