كتلة شيفرة

import { CodeBlock } from 'topclassui/code-block'

/** The drawn block: a file name, the copy button, and the code passed as a template literal. */
export default function Demo() {
  return (
    <CodeBlock lang="tsx" title="page.tsx">
      {`export default async function Page() {
  const invoices = await getInvoices()
  return <InvoiceTable items={invoices} />
}`}
    </CodeBlock>
  )
}

import { CodeBlock } from 'topclassui/code-block'

const CODE = `import { CodeBlock } from 'topclassui/code-block'

// Coloured by the caller, copied as plain text
export const sample = <CodeBlock title="page.tsx">{code}</CodeBlock>`

const KEYWORD = 'font-semibold'
const STRING = 'italic'
const COMMENT = 'text-neutral-on-solid/70'

/** highlighted: nodes the caller made, here by hand, rendered in place of the text. The button
 * still copies children. A highlighter at build time would hand the same kind of nodes. */
export default function Demo() {
  return (
    <CodeBlock
      lang="tsx"
      title="sample.tsx"
      highlighted={(
        <>
          <span className={KEYWORD}>import</span>{' { CodeBlock } '}<span className={KEYWORD}>from</span>{' '}
          <span className={STRING}>{`'topclassui/code-block'`}</span>
          {'\n\n'}
          <span className={COMMENT}>{'// Coloured by the caller, copied as plain text'}</span>
          {'\n'}
          <span className={KEYWORD}>export const</span>{' sample = <CodeBlock title='}<span className={STRING}>{'"page.tsx"'}</span>
          {'>{code}</CodeBlock>'}
        </>
      )}
    >
      {CODE}
    </CodeBlock>
  )
}

import { CodeBlock } from 'topclassui/code-block'

const LINE = ["const token = '", 'a1b2c3d4e5'.repeat(28), "abcd'"].join('')

/** One line of 300 characters: it scrolls inside the block, and the page never scrolls sideways. */
export default function Demo() {
  return (
    <CodeBlock lang="ts" title="token.ts">
      {LINE}
    </CodeBlock>
  )
}

import { CodeBlock } from 'topclassui/code-block'

/** wrap: a long line breaks inside the block instead of scrolling it, and the code is no tab stop. */
export default function Demo() {
  return (
    <CodeBlock lang="tsx" title="invoice-row.tsx" wrap>
      {`export const columns = ['number', 'customer', 'issued', 'due', 'amount', 'status', 'actions'] as const satisfies readonly InvoiceColumn[]`}
    </CodeBlock>
  )
}

import { CodeBlock } from 'topclassui/code-block'

/** A title and no button: the block ships no script at all. */
export default function Demo() {
  return (
    <CodeBlock lang="css" title="globals.css" showCopy={false}>
      {`:root {
  --tc-radius: 0.75rem;
}`}
    </CodeBlock>
  )
}

import { CodeBlock } from 'topclassui/code-block'

/** No title and no copy button: no header either, so the code takes the top padding back. */
export default function Demo() {
  return (
    <CodeBlock lang="sh" showCopy={false}>
      {'pnpm add topclassui zod'}
    </CodeBlock>
  )
}

import { getLabels } from 'topclassui/labels/get-labels'
import { TopClassProvider } from 'topclassui/provider'
import { CodeBlock } from 'topclassui/code-block'

/** Arabic: the header keeps the page's direction, so the button sits at the inline end, on the
 * left, and the button reads its Arabic name. The code still reads left to right. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar">
        <CodeBlock {...getLabels('ar')} lang="tsx" title="الفواتير.tsx">
          {`export default async function Page() {
  const invoices = await getInvoices()
  return <InvoiceTable items={invoices} />
}`}
        </CodeBlock>
      </div>
    </TopClassProvider>
  )
}