Code

Códigos e IDs en línea con la tipografía mono y cero con barra, para que ningún carácter se confunda.

Your order is GT-48210-OI01. Keep it for returns.

Gift card code: Il10-O0S5-8B3Z

Instalación

$ pnpm dlx shadcn@latest add @ssntl/code

Uso

tsx

import { Code } from "@/components/ui/code"

<p>Tu pedido es <Code>GT-48210-OI01</Code>.</p>

Reglas

Lo que este componente espera de ti, tal como se instala en components/ui/code.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

components/ui/code.md

## Reglas de Code

- **Caracteres claros.** Mona Sans dibuja I y l igual, por eso códigos, IDs y claves usan Geist Mono, donde O, 0, I, l y 1 son distintos.
- Además `slashed-zero`, así 0 y O no se confunden ni en tamaño caption.
- Los códigos largos se parten en lugar de desbordar. Si la gente lo copia, acompáñalo con un botón de copiar.

Abrir el archivo de reglas completo

Código

components/ui/code.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

// Codes, IDs, references and keys: anything someone reads back or types in.
// Clear characters: Mona Sans draws I and l the same, so codes use the
// system's mono face (Geist Mono), where O, 0, I, l and 1 all differ, plus a
// slashed zero.
function Code({ className, ...props }: React.ComponentProps<"code">) {
  return (
    <code
      data-slot="code"
      className={cn(
        "rounded-xs bg-muted px-1.5 py-0.5 font-mono text-mono wrap-break-word text-foreground slashed-zero",
        className
      )}
      {...props}
    />
  )
}

export { Code }