1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegaciónretronavigationgame

Retro Arcade Menu

Menú retro de estilo arcade con efectos de selección luminosa y tipografía pixel.

▶ LOAD GAME
OPTIONS
EXIT

Uso

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

tsx
import { RetroArcadeMenu } from 'react-component-kit-ui/navigation';

<RetroArcadeMenu>Content</RetroArcadeMenu>

Instalación Manual

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

RetroArcadeMenu.tsx
'use client';

import './RetroArcadeMenu.css';

/** RetroArcadeMenu — ported from astro-component-kit. */
export interface RetroArcadeMenuProps {
}

export function RetroArcadeMenu({}: RetroArcadeMenuProps) {
  return (
    <>
      <div className="retro-menu" data-rk-00ab44="">
        <div className="item selected" data-rk-00ab44="">▶ LOAD GAME</div>
        <div className="item" data-rk-00ab44="">OPTIONS</div>
        <div className="item" data-rk-00ab44="">EXIT</div>
      </div>
    </>
  );
}

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

.retro-menu:where([data-rk-00ab44]) { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; }
.item:where([data-rk-00ab44]) { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; }
.item.selected:where([data-rk-00ab44]) { color: #facc15; }

Información Rápida

Categoría
Navegación
Nombre de archivo
RetroArcadeMenu.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
retronavigationgame