1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografíatypographycodeglass

Inline Code (Glass)

Fragmento de código en línea con fondo de cristal, borde sutil y tipografía monospace.

Inline Code (Glass)

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { CodeInlineGlass } from 'react-component-kit-ui/typography';

<CodeInlineGlass>Content</CodeInlineGlass>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/CodeInlineGlass.tsx + CodeInlineGlass.css:

CodeInlineGlass.tsx
'use client';

import type { ReactNode } from 'react';
import './CodeInlineGlass.css';

/** CodeInlineGlass — ported from astro-component-kit. */
export interface CodeInlineGlassProps {
  children?: ReactNode;
}

export function CodeInlineGlass({ children }: CodeInlineGlassProps) {
  return (
    <>
      <code className="glass-code" data-rk-8ec09e="">{children}</code>
    </>
  );
}

export default CodeInlineGlass;
CodeInlineGlass.css
/* CodeInlineGlass — ported from astro-component-kit (typography/CodeInlineGlass.astro) */

.glass-code:where([data-rk-8ec09e]) { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 0.2rem 0.4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #e2e8f0; font-size: 0.9em; }

Información Rápida

Categoría
Tipografía
Nombre de archivo
CodeInlineGlass.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
typographycodeglass