1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datosprogressdatastat

Minimal Progress List

Lista de barras de progreso compactas para comparar porcentajes de categorías.

Storage42%
Bandwidth68%

Uso

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

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

<ProgressListSmall>Content</ProgressListSmall>

Instalación Manual

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

ProgressListSmall.tsx
'use client';

import './ProgressListSmall.css';

/** ProgressListSmall — ported from astro-component-kit. */
export interface ProgressListSmallProps {
}

export function ProgressListSmall({}: ProgressListSmallProps) {
  return (
    <>
      <div className="p-list" data-rk-7a9f23="">
        <div className="p-row" data-rk-7a9f23=""><span data-rk-7a9f23="">Storage</span><strong data-rk-7a9f23="">42%</strong></div>
        <div className="p-bar" data-rk-7a9f23=""><div className="fill" style={{ width: "42%" }} data-rk-7a9f23=""></div></div>
        <div style={{ marginTop: "1rem" }} data-rk-7a9f23=""></div>
        <div className="p-row" data-rk-7a9f23=""><span data-rk-7a9f23="">Bandwidth</span><strong data-rk-7a9f23="">68%</strong></div>
        <div className="p-bar" data-rk-7a9f23=""><div className="fill" style={{ width: "68%", background: "#c084fc" }} data-rk-7a9f23=""></div></div>
      </div>
    </>
  );
}

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

.p-list:where([data-rk-7a9f23]) { width: 100%; max-width: 300px; }
.p-row:where([data-rk-7a9f23]) { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 6px; }
span:where([data-rk-7a9f23]) { color: #64748b; font-weight: 600; }
strong:where([data-rk-7a9f23]) { color: #fff; }
.p-bar:where([data-rk-7a9f23]) { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 100px; overflow: hidden; }
.fill:where([data-rk-7a9f23]) { height: 100%; background: #6366f1; border-radius: inherit; }

Información Rápida

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