CompositionDisponible

Game Action Bar

Controles del juego en una fila, directamente sobre la página: primero las herramientas y al final la acción principal. En barras estrechas las herramientas van en una fila y la acción debajo.

Loading example…

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-action-bar.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

"use client";
import { useState } from "react";
import { ArrowElbowDownLeftIcon, ArrowRightIcon, CheckCircleIcon, CloudCheckIcon, EyeIcon, LightbulbIcon, SpeakerHighIcon } from "@phosphor-icons/react";
import { GameActionBar, GameActionMain, GameActionTool } from "@/components/ui/game-action-bar";
export default function Demo() {
  const [solved, setSolved] = useState(false);
  return (
    <div className="grid w-full gap-6">
      <GameActionBar
        aria-label="Practice actions"
        status={
          solved ? (
            <><CheckCircleIcon weight="fill" aria-hidden="true" /> Correct!</>
          ) : (
            <output title="Draft saved" className="inline-flex">
              <CloudCheckIcon weight="bold" size={20} aria-hidden="true" />
              <span className="sr-only">Draft saved</span>
            </output>
          )
        }
      >
        <GameActionTool icon={<SpeakerHighIcon weight="bold" />} keys={["Ctrl", "'"]} aria-label="Listen again">Listen</GameActionTool>
        <GameActionTool icon={<LightbulbIcon weight="bold" />} keys={["Ctrl", "Shift", ";"]} aria-label="Hint for this word" disabled={solved}>Hint</GameActionTool>
        <GameActionTool icon={<EyeIcon weight="bold" />} keys={["Ctrl", ";"]} aria-label="Show answer">Answer</GameActionTool>
        <GameActionMain
          icon={solved ? <ArrowRightIcon weight="bold" /> : <ArrowElbowDownLeftIcon weight="bold" />}
          onClick={() => setSolved(!solved)}
        >
          {solved ? "Next" : "Check"}
        </GameActionMain>
      </GameActionBar>
      <div className="w-full max-w-sm">
        <GameActionBar aria-label="Practice actions on a phone">
          <GameActionTool icon={<SpeakerHighIcon weight="bold" />} aria-label="Listen again">Listen</GameActionTool>
          <GameActionTool icon={<LightbulbIcon weight="bold" />} aria-label="Hint for this word">Hint</GameActionTool>
          <GameActionTool icon={<EyeIcon weight="bold" />} aria-label="Show answer">Answer</GameActionTool>
          <GameActionMain disabled icon={<ArrowElbowDownLeftIcon weight="bold" />}>Check</GameActionMain>
        </GameActionBar>
      </div>
    </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
status	ReactNode	—	Short status, such as a draft icon with hidden text, shown when the bar is wide and kept for assistive technology otherwise.
GameActionTool icon / keys	ReactNode / string[]	Required / —	Helper action; keys appear on wide bars and are decorative, so also set aria-keyshortcuts.
GameActionMain icon	ReactNode	—	Main action with the game-number label; disabled it lies flat and muted.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

La barra es un grupo con etiqueta; da a cada herramienta y a la acción principal un nombre accesible que contenga su texto visible.

Las teclas visibles quedan ocultas a tecnologías de asistencia; declara los atajos con aria-keyshortcuts.