Brickslab.

@brickslab/ui-web

Bloc de code avec bouton de copie intégré. Deux variantes : modern (header style éditeur, numéros de ligne) et simple (badge flottant). Utilisé sur toutes les pages du catalog.

Variante modern (défaut)

language="tsx"

tsx
import { Heading } from "@brickslab/ui-web";

export default function MyPage() {
  return (
    <div>
      <Heading title="Bienvenue" level={1} tone="brand" />
      <Heading title="Sous-titre" level={2} tone="muted" />
    </div>
  );
}

Avec filename

MyPage.tsx
import { Heading } from "@brickslab/ui-web";

export default function MyPage() {
  return (
    <div>
      <Heading title="Bienvenue" level={1} tone="brand" />
      <Heading title="Sous-titre" level={2} tone="muted" />
    </div>
  );
}

language="css"

css
/* Variables de tokens */
:root {
  --color-brand: #CC4A48;
  --color-fg: var(--color-fg);
  --radius-md: 8px;
}

.my-component {
  color: var(--color-brand);
  border-radius: var(--radius-md);
}

language="bash"

bash
# Installation
npm install @brickslab/ui-web

# Ou avec pnpm
pnpm add @brickslab/ui-web

Variante simple

variant="simple"

tsx
import { Heading } from "@brickslab/ui-web";

export default function MyPage() {
  return (
    <div>
      <Heading title="Bienvenue" level={1} tone="brand" />
      <Heading title="Sous-titre" level={2} tone="muted" />
    </div>
  );
}

Props

PropTypeDéfautRequisDescription
codestring—✓Code source à afficher.
languagestring"tsx"—Langage affiché dans le header (ex. : tsx, ts, js, css, bash).
variant"modern" | "simple""modern"—modern : header style éditeur avec dots, numéros de ligne et bouton copier. simple : version minimaliste avec badge langue flottant.
filenamestring——Nom de fichier affiché dans le header (variante modern uniquement). Remplace le langage si fourni.

Utilisation

exemple.tsx
import { CodeBlock } from "@brickslab/ui-web";

// Variante moderne (défaut)
<CodeBlock code="const x = 1;" language="tsx" />

// Avec nom de fichier
<CodeBlock code={snippet} language="tsx" filename="Button.tsx" />

// Variante simple
<CodeBlock code="npm install @brickslab/ui-web" language="bash" variant="simple" />