1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datosdatalistdetails

Data Key-Value List

Lista de descripciones con etiquetas en columna izquierda y valores alineados.

Module Name
AuthEngine
Version
1.4.2
Status
Deployment Ready

Uso

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

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

<DescriptionListHoriz>Content</DescriptionListHoriz>

Instalación Manual

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

DescriptionListHoriz.tsx
'use client';

import './DescriptionListHoriz.css';

/** DescriptionListHoriz — ported from astro-component-kit. */
export interface DescriptionListHorizProps {
}

export function DescriptionListHoriz({}: DescriptionListHorizProps) {
  return (
    <>
      <dl className="desc-list" data-rk-9f0e85="">
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Module Name</dt><dd data-rk-9f0e85="">AuthEngine</dd></div>
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Version</dt><dd data-rk-9f0e85="">1.4.2</dd></div>
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Status</dt><dd data-rk-9f0e85="">Deployment Ready</dd></div>
      </dl>
    </>
  );
}

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

.desc-list:where([data-rk-9f0e85]) { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); }
.row:where([data-rk-9f0e85]) { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
.row:last-child:where([data-rk-9f0e85]) { border-bottom: none; }
dt:where([data-rk-9f0e85]) { color: #64748b; font-weight: 600; }
dd:where([data-rk-9f0e85]) { color: #fff; margin: 0; }

Información Rápida

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