1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación retronavigationgame

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 página de Astro:

astro 
---
import { RetroArcadeMenu } from 'astro-component-kit';
---

<RetroArcadeMenu>Content</RetroArcadeMenu>
--- import { RetroArcadeMenu } from 'astro-component-kit'; --- <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/lib/RetroArcadeMenu.astro:

astro 
---
---
<div class="retro-menu">
  <div class="item selected">▶ LOAD GAME</div>
  <div class="item">OPTIONS</div>
  <div class="item">EXIT</div>
</div>
<style>
  .retro-menu { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; }
  .item { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; }
  .item.selected { color: #facc15; }
</style>
--- --- <div class="retro-menu"> <div class="item selected">▶ LOAD GAME</div> <div class="item">OPTIONS</div> <div class="item">EXIT</div> </div> <style> .retro-menu { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; } .item { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; } .item.selected { color: #facc15; } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
RetroArcadeMenu.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
retronavigationgame