1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datosratingdatagraph

Rating Distribution

Desglose visual de calificaciones con barras de distribución de 5 a 1 estrellas.

5★
4★
3★

Uso

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

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

<RatingBreakdownBar>Content</RatingBreakdownBar>

Instalación Manual

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

RatingBreakdownBar.tsx
'use client';

import './RatingBreakdownBar.css';

/** RatingBreakdownBar — ported from astro-component-kit. */
export interface RatingBreakdownBarProps {
}

export function RatingBreakdownBar({}: RatingBreakdownBarProps) {
  return (
    <>
      <div className="rating-box" data-rk-5d3b8d="">
        <div className="r-row" data-rk-5d3b8d=""><span data-rk-5d3b8d="">5★</span><div className="bar-bg" data-rk-5d3b8d=""><div className="bar-val" style={{ width: "80%" }} data-rk-5d3b8d=""></div></div></div>
        <div className="r-row" data-rk-5d3b8d=""><span data-rk-5d3b8d="">4★</span><div className="bar-bg" data-rk-5d3b8d=""><div className="bar-val" style={{ width: "15%" }} data-rk-5d3b8d=""></div></div></div>
        <div className="r-row" data-rk-5d3b8d=""><span data-rk-5d3b8d="">3★</span><div className="bar-bg" data-rk-5d3b8d=""><div className="bar-val" style={{ width: "5%" }} data-rk-5d3b8d=""></div></div></div>
      </div>
    </>
  );
}

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

.rating-box:where([data-rk-5d3b8d]) { display: flex; flex-direction: column; gap: 8px; width: 220px; }
.r-row:where([data-rk-5d3b8d]) { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.75rem; font-weight: 700; }
.bar-bg:where([data-rk-5d3b8d]) { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.03); }
.bar-val:where([data-rk-5d3b8d]) { height: 100%; background: #fbbf24; border-radius: inherit; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }

Información Rápida

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