CodeBlock

const codeBlockFixture = {
  id: "code-block",
  code: "#!/usr/bin/env bash\nset -euo pipefail\nkubectl rollout status deploy/ledger-api --timeout=90s",
  filename: "deploy.sh",
  lang: "bash" as const,
  lineNumbers: true,
};
 
import { CodeBlock } from "@grassroot/ui-react/advanced";
 
export default function CodeBlockDemo() {
  const { id: _id, ...props } = codeBlockFixture;
  return (
    <div>
      <CodeBlock {...props} />
    </div>
  );
}

<script setup lang="ts">
const codeBlockFixture = {
  id: "code-block",
  code: "#!/usr/bin/env bash\nset -euo pipefail\nkubectl rollout status deploy/ledger-api --timeout=90s",
  filename: "deploy.sh",
  lang: "bash" as const,
  lineNumbers: true,
};
 
import { CodeBlock } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <CodeBlock
      :code="codeBlockFixture.code"
      :filename="codeBlockFixture.filename"
      :lang="codeBlockFixture.lang"
      :line-numbers="codeBlockFixture.lineNumbers"
    />
  </div>
</template>

import { Component } from "@angular/core";
const codeBlockFixture = {
  id: "code-block",
  code: "#!/usr/bin/env bash\nset -euo pipefail\nkubectl rollout status deploy/ledger-api --timeout=90s",
  filename: "deploy.sh",
  lang: "bash" as const,
  lineNumbers: true,
};
 
import { GrassrootCodeBlock } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-code-block-demo",
  standalone: true,
  imports: [GrassrootCodeBlock],
  template: `
    <div>
      <grassroot-code-block
        [code]="fixture.code"
        [filename]="fixture.filename"
        [lang]="fixture.lang"
        [lineNumbers]="fixture.lineNumbers"
      />
    </div>
  `,
})
export class CodeBlockDemoComponent {
  protected readonly fixture = codeBlockFixture;
}
 
export default CodeBlockDemoComponent;

<script lang="ts">
  const codeBlockFixture = {
    id: "code-block",
    code: "#!/usr/bin/env bash\nset -euo pipefail\nkubectl rollout status deploy/ledger-api --timeout=90s",
    filename: "deploy.sh",
    lang: "bash" as const,
    lineNumbers: true,
  };
 
  import { CodeBlock } from "@grassroot/ui-svelte";
</script>
 
<div>
  <CodeBlock
    code={codeBlockFixture.code}
    filename={codeBlockFixture.filename}
    lang={codeBlockFixture.lang}
    lineNumbers={codeBlockFixture.lineNumbers}
  />
</div>

/** @jsxImportSource solid-js */
const codeBlockFixture = {
  id: "code-block",
  code: "#!/usr/bin/env bash\nset -euo pipefail\nkubectl rollout status deploy/ledger-api --timeout=90s",
  filename: "deploy.sh",
  lang: "bash" as const,
  lineNumbers: true,
};
 
import { CodeBlock } from "@grassroot/ui-solid";
 
export default function CodeBlockDemo() {
  return (
    <div>
      <CodeBlock
        code={codeBlockFixture.code}
        filename={codeBlockFixture.filename}
        lang={codeBlockFixture.lang}
        lineNumbers={codeBlockFixture.lineNumbers}
      />
    </div>
  );
}