FeedbackDisponible
Game Stat
Chip de marcador para puntos o tiempo: icono, etiqueta y una cifra de juego que puede saltar al cambiar.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/game-stat.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
"use client";
import { useState } from "react";
import { TimerIcon, TrophyIcon } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { GameStat } from "@/components/ui/game-stat";
export default function Demo() {
const [points, setPoints] = useState(220);
return (
<div className="flex flex-wrap items-center gap-3">
<GameStat icon={<TimerIcon weight="bold" />} label="Time" hideLabel value="01:05" />
<GameStat icon={<TrophyIcon weight="bold" />} label="Points" tone="yellow" bump value={points} />
<Button variant="outline" onClick={() => setPoints(points + 120)}>+120 points</Button>
</div>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| label / value / icon | string / ReactNode / ReactNode | Required | The label stays available even when hidden; the icon is decorative. |
| tone / hideLabel / bump | card | mint | sky | purple | yellow / boolean / boolean | card / false / false | Pastel tones with ink text; bump pops the value on change. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
La etiqueta y el valor se leen en orden; ocultar la etiqueta la conserva para lectores de pantalla.
El salto se detiene con movimiento reducido; no actives bump en relojes.