1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datosmetadatapillsdata

Metadata Pill List

Agrupación de píldoras de atributos clave-valor para especificaciones técnicas.

OS:MacOS
Ver:14.5
Arch:ARM64

Uso

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

tsx
import { KeyValuePillGroup } from 'react-component-kit-ui/data';

<KeyValuePillGroup>Content</KeyValuePillGroup>

Instalación Manual

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

KeyValuePillGroup.tsx
'use client';

import './KeyValuePillGroup.css';

/** KeyValuePillGroup — ported from astro-component-kit. */
export interface KeyValuePillGroupProps {
}

export function KeyValuePillGroup({}: KeyValuePillGroupProps) {
  return (
    <>
      <div className="meta-row" data-rk-ffdece="">
        <div className="m-pill" data-rk-ffdece="">OS:<span data-rk-ffdece="">MacOS</span></div>
        <div className="m-pill" data-rk-ffdece="">Ver:<span data-rk-ffdece="">14.5</span></div>
        <div className="m-pill" data-rk-ffdece="">Arch:<span data-rk-ffdece="">ARM64</span></div>
      </div>
    </>
  );
}

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

.meta-row:where([data-rk-ffdece]) { display: flex; gap: 8px; flex-wrap: wrap; }
.m-pill:where([data-rk-ffdece]) { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); }
span:where([data-rk-ffdece]) { color: #e2e8f0; margin-left: 6px; }

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
KeyValuePillGroup.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
metadatapillsdata