Brickslab.Tools

@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

Prop	Type	Défaut	Requis	Description
`code`	`string`	—	✓	Code source à afficher.
`language`	`string`	`"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.
`filename`	`string`	—	—	Nom de fichier affiché dans le header (variante modern uniquement). Remplace le langage si fourni.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  code="..."
  language="tsx"
  variant="modern"
  filename="..."
/>

codelanguagevariantfilename

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" />